疑似クラス:hoverはIE7では機能しません
-
02-07-2019 - |
質問
このような単純なコードがあります:
<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
タグを削除すると、動作していることもわかりました。アイデアはありますか?
解決
IE7では、doctypeを明示的に指定しない限り、:hover
擬似クラスを非アンカー要素に適用できません。 doctype宣言をページに追加するだけで、完全に機能するはずです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
IE7 / quirksモードの詳細については、このブログ投稿をご覧ください。
他のヒント
このソリューションの方がうまく機能し、少しすっきりしていることがわかりました:
<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>
それは二重マージンの問題でしょうか? 私はディスプレイをしました:李のためにそれが起こったときにインラインブロック http://www.positioniseverything.net/explorer/doubled-margin.html
所属していません StackOverflow