伪类：hover在IE7中不工作

本文介绍了伪类：hover在IE7中不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个如此简单的代码：

I've got such a simple code:

<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 标签比它的工作。任何想法？

The problem is: When I move the cursor from .div2 to .div3 (.div3 should stay visible because it's the child of .div1) then the hover is disabled. I'm testing it in IE7, in FF it works fine. What am I doing wrong? I've also realized that when i remove .div5 tag than it's working. Any ideas?

推荐答案

IE7不允许您应用：hover 伪类到非锚定元素，除非您明确指定一个doctype。

IE7 won't allow you to apply :hover pseudo-classes to non-anchor elements unless you explicitly specify a doctype. Just add a doctype declaration to your page and it should work perfectly.

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

有关IE7 / quirks模式的更多信息，请访问。

More on IE7/quirks mode can be found on this blog post.

这篇关于伪类：hover在IE7中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！