微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

伪类:hover在IE7中不起作用

如何解决伪类:hover在IE7中不起作用

IE7不允许您将:hover伪类应用于非锚元素,除非您明确指定doctype。只需在页面添加一个doctype声明,它就可以正常工作。

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

解决方法

我有一个简单的代码:

<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标签时,它就不起作用了。有任何想法吗?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。