0

z-index上のオーバーレイ (より高い) を使用して画像の一部を強調表示しようとすると、非常に奇妙なバグが発生し:hoverます。Safari / Firefox / Chrome では問題ありません。しかし、IE (8 または 9) では、:hoverオーバーレイが常に表示されない場合 (nobackground-colorまたはvisibility:hidden)をトリガーしないように見えるため、私の単純な CSS コードは機能しません。

HTML と CSS を使用した MWE は次のとおりです。

<html>
<head>
  <style>
    .photo-notes {
      position: absolute;
      z-index: 998;
    }
    .photo-notes ul {
      position: relative;
    }
   .photo-notes li {
      list-style: none;
      position: absolute;
      background: #ccc;
      z-index: 999;
    }
    .photo-notes li:hover {
      background: red;
    }
    .photo-container {
      z-index: 1;
    }
  </style>
</head>
<body>
<div>
  <div class="photo-notes">
    <ul>
      <li style="left:  25px; top: 20px; width: 50px; height: 100px;"> </li>
    </ul>
  </div>
  <div class="photo-container">
    <img src="http://www.google.com/logos/2012/newyearsday-2012-hp.jpg"/>
  </div>
</div>
</body>
</html>

上記のコードは機能しますが、スタイリングを削除background: #cccまたは追加しようとすると、IE では動作しなくなります (これ以上の効果はありません)。visibility:hiddenli:hover

さらに奇妙なことは、行が削除された場合で:hoverもなくても機能する (トリガーされる) ことです。したがって、考えられるようにIEで表示されない要素では不可能であるという問題ではなく、明示的なes をどこにでも追加しようとしましたが成功しませんでした...backgroundvisibility:hiddenli<img>:hoverz-index

何が起こっているのか、それを解決する方法について何か考えはありますか?

4

1 に答える 1

0

さて、私は背景を設定して自分で解決しopacity:0ましたli（これはIEfilter: alpha(opacity:0))の場合、:hover.

于 2012-04-10T19:20:48.983 に答える