Question

我创建了一个网页，其中id =“x”的div位于另一个div =“y”的div中。内部div有display：none。一旦外部div被悬停，内部div的显示被设置为“内联”。问题是，只要内部div可见并且我试图将其悬停，div就会消失，因为它的显示再次设置为“none”。此问题仅出现在IE中，而不是FF或Chrome中。在Firefox或Chrome中，我可以悬停外部div，当内部div变得可见时，我也可以将其悬停。

HTML代码：

<divid="y">Blah Blah
<div id="x">Random Text</div>
</div>

CSS代码：

div#y:hover div{display:inline;} 
div#x{display:none;}

Answer 1

我不肯定，如果这可行，但尝试添加另一个外部div：

<div id="y">Blah Blah
    <div id"anotherDiv"><div id="x">Random Text</div></div>
</div>

显示块

div#anotherDiv {display: block; }

http://jsfiddle.net/9zBbP/

Answer 2

问题是，当鼠标悬停在divx上时，你正在盘旋另一个对象。您可以通过将鼠标悬停在divx上来修复此问题，将显示更改为内联，这也可以解决问题。

div#x:hover div{display:inline;}

http://jsfiddle.net/9zBbP/6/

这也可以让你降低HTML和CSS的大小，因为你可以将y：hover和x：hover组合到CSS中的相同属性，并且你只在HTML中使用2个div。

Answer 3

你只需要放置适当的doctype以使其在IE中运行。

<!DOCTYPE html>

你应该有这样的标记：假设<divid="y" >是一个错字。

<div id="y">Blah Blah
   <div id="x">Random Text</div>
</div>

Answer 4

#y:hover #x{
        display:inline;
    } 
#x{
    display:none;
}

也可以通过这种方式实现

div内部div在IE中徘徊？

4 个答案: