Question

这是我第一次以这种方式使用CSS悬停。但它不起作用。

我试图在用户悬停导航中的项目时显示导航云。

这是我目前的CSS

.menuBox li a:hover,.menuBox li.selected a { color: #fff; background-color: #068dda; }

.menuBox .cloudnav { display: none; position: absolute; width: 995px; height: 500px; background-color: #fff; z-index: 999999; border: 1px solid #4a4d4b;}

.menuBox li a:hover>.cloudnav { display: block; }

这是我目前的html

<nav class="menuBox">
<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
<div class="cloudnav">test</div>
</nav>

我甚至为你们制作了一个小伙伴：http://jsfiddle.net/tAgEj/

我也试过了.menuBox li a:hover + .cloudnav { display: block; }，但这也不起作用。

是什么？

Answer 1

它不适用于a：hover。但是在较新的浏览器中，您可以像这样进行操作

.menuBox ul:hover + .cloudnav { display: block; }

但这只适用于较新的浏览器，因为许多IE不支持将鼠标悬停在<a>以外的其他位置

.menuBox li a:hover>.cloudnav { display: block; }这不起作用，因为div.cloudnav不是a元素的直接子元素。这将是有效的，如果它是

<a href="#">something<div class="cloudnav"></div></a>

CSS悬停不在云导航中工作

1 个答案: