我有一个简单的代码:
<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标签时,它就不起作用了。有任何想法吗?
.div2
.div3
.div1
.div5
IE7不允许您将:hover伪类应用于非锚元素,除非您明确指定doctype。只需在页面上添加一个doctype声明,它就可以正常工作。
:hover
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">