伪类 :hover 在 IE7 中不起作用答案

【问题标题】：Pseudo class :hover does not work in IE7伪类 :hover 在 IE7 中不起作用
【发布时间】：2008-09-27 09:23:08
【问题描述】：

我有这么简单的代码：

<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 标签时，它会起作用。有什么想法吗？

【问题讨论】：

请注意，您可能还需要添加 .div3:hover{ display: block } 否则当您将鼠标移到子元素 .div3 上时，父级将失去其伪类：徘徊。然而，这取决于您的实现。

标签： html css internet-explorer-7

【解决方案1】：

IE7 不允许您将:hover 伪类应用于非锚元素，除非您明确指定文档类型。只需向您的页面添加一个 doctype 声明，它应该可以完美运行。

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

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

【讨论】：

【解决方案2】：

我发现这个解决方案效果更好，而且更干净一些：

    <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>

pastebin.

【讨论】：

这比指定 DOCTYPE 更“干净”？怎么样？
@mkoistinen 请注意，这是在 DOCTYPE 回答前 14 小时发布的，当时我并不知道 :)
啊，我的错，我应该查看日期以找出正确的上下文。

【解决方案3】：

可能是双边距问题吗？我做了一个 display: inline-block 当它发生在一个 li http://www.positioniseverything.net/explorer/doubled-margin.html

【讨论】：