0

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

HTML 代码：

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

代码：

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

4 回答 4

0

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

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

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

这也将使您能够减小 HTML 和 CSS 的大小，因为您可以将 y:hover 和 x:hover 组合到 CSS 中的相同属性，并且您在 HTML 中只使用 2 个 div。

于 2013-04-14T09:20:36.137 回答
0

我不确定这是否可行，但尝试添加另一个外部 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/

于 2013-04-14T09:17:09.697 回答
0

您只需要放置正确的文档类型即可使其在 IE 中工作。

<!DOCTYPE html>

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

<div id="y">Blah Blah
   <div id="x">Random Text</div>
</div>
于 2013-04-14T09:25:58.090 回答
0 
#y:hover #x{
        display:inline;
    } 
#x{
    display:none;
}

也可以通过这种方式实现

于 2013-04-14T11:16:19.650 回答