11

私はそのような単純なコードを持っています:

<div class="div1">
  <div class="div2">Foo</div>
  <div class="div3">
    <div class="div4">
      <div class="div5">
        Bar
      </div>        
    </div>
  </div>
</div>

そしてこのCSS：

.div1{
  position: relative;
}
.div1 .div3 {
  position: absolute;
  top: 30px;
  left: 0px;
  width: 250px;
  display: none;
}
.div1:hover .div3 {
  display: block;
}
.div2{
  width: 200px;
  height: 30px;
  background: red;
}
.div4 {
  background-color: green;
  color: #000;  
}
.div5 {}

問題は次のとおりです。カーソルを から に移動する.div2と.div3(.div3の子であるため、表示されたままになるはずです.div1)、ホバーが無効になります。私はIE7でテストしていますが、FFでは問題なく動作します。私は何を間違っていますか？.div5また、タグを削除すると機能することにも気付きました。何か案は？

4

3 に答える 3

25

:hoverIE7 では、doctype を明示的に指定しない限り、疑似クラスを非アンカー要素に適用することはできません。ページに doctype 宣言を追加するだけで、完全に機能するはずです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

IE7/quirks モードの詳細については、このブログ投稿を参照してください。

于 2008-09-27T22:26:02.607 に答える
0

このソリューションはよりうまく機能し、少しきれいであることがわかりました：

    <style type="text/css">
        * {
            color: #fff;
        }
        .wrapper {

        }

        .trigger {
            background: #223;
        }

        .appear {
            background: #334;
            display: none;
        }

        .trigger:hover .appear {
            display: block;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="trigger">
            <p>This is the trigger for the hover element.</p>
            <div class="appear">
                <p>I'm <strong>alive!</strong></p>
            </div>
        </div>
    </div>

</body>

ペーストビン。

于 2008-09-27T09:31:28.727 に答える
0

二重マージンの問題でしょうか？私は表示を行いました：それがli http://www.positioniseeverything.net/explorer/doubled-margin.htmlで起こったときのインラインブロック

于 2010-11-11T09:15:39.493 に答える