javascript - 画像上でマウスオーバーがちらつく

Question

私はレガシー サイトを管理していますが、このサイトには奇妙なマウスオーバーの問題があります。IE では発生しませんが、Chrome では発生します。問題が何であるかを確認しようとしましたが、見つかりません。拡大画像もマウスオーバー画像に反応しているようです。これがURLです。画像にカーソルを合わせて + にカーソルを合わせると発生します。

http://www.movi​​q.nl/zonz-schaduwdoeken-zonnezeilen

Answer 1

右 + クリック (Mac では Control + クリック) して要素を検査し、マウスオーバーを非常にゆっくりと行います。

その + のスクリプトは、画像の位置を台無しにして + をカーソルの下から移動させるスタイルを追加しています。ゆっくり行けば、それが起こる瞬間を特定できます。

以上：

<div class="contentAsset contentAsset-hover contentAsset-hover-delayOff_500 
contentAsset-large contentAssetLast" style="position: relative; overflow-x: 
hidden; overflow-y: hidden; " id="qid_15">

アウト：

<div class="contentAsset contentAsset-hover contentAsset-hover-delayOff_500 
contentAsset-large contentAssetLast" style="" id="qid_15">

コンソールを見ると、たくさんのエラーが表示されます。

Answer 2

ここでの問題は、+ 記号をホバーすると、画像のホバー イベントが失われるため、ブラウザーがホバー状態から非ホバー状態に変化し続けることです。これは、コードで奇妙なことが起こっているためです...コードをよりシンプルで解釈しやすくし、もちろん問題を解決するために、いくつかの変更を加えることをお勧めします:

onmouseoverおよびonmouseoutイベントに必要なスクリプト:

function endAssetButtons(el) {
  if (!Spif.isIE||!Spif.isIE7) {
    el.parentNode.style.position="";
    el.parentNode.style.overflow="";
  }
}
function startAssetButtons(el,id) {
  if (!Spif.isIE||!Spif.isIE7) {
    el.parentNode.style.position="relative";
    el.parentNode.style.overflow="hidden";
  }
}

画像ラッパー (div) にいくつかの CSS を追加および削除しています。CSS の position:relative と overflow:hidden を常に存在させて、+ 記号をイメージ ラッパー div に対して常に絶対位置に配置できるようにする必要があるため、これは誤りであり、削除する必要があります。

したがって、この css は常にすべてのブラウザで利用できるはずです。

.contentAsset {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

content.css (300行目)

これにより、すべてのブラウザーが + 記号を均等に処理し、アニメーションがトリガーされるまで非表示のままにすることができます。

---

さらに、+ 記号の css を次のように変更する必要があります。

.contentAssetButton {
    text-indent:-9999px;
    height: 15px;
    width: 15px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: -20px;
    display: block;
}

content.css (334行目)

これにより、+ 記号がよりボタンに似たスタイルになり、すべてのブラウザーで認識しやすくなります。

少なくとも、これはあなたを正しい方向に向けるはずです!

ここにあります、フィドルの例です!

Answer 3

パディングで高さを定義しようとするのではなく、高さを定義してみてください。ただし、クロムエディタ内では何も変更されないようです。

モーフ属性を使用して、どこかの js をターゲットにしていると思いますか? もしそうなら、jsを提供してください。

または、CSS3 のみを使用することもできます。http://ice.im/animatedlink/

私はあなたのためにそれを作りました.あなたのHTMLはただ:

<!-- language: lang-html -->    
<div class="image"><a href="#"></a><img src="image.jpg" /></div>

クラスを好きなように変更するだけです