0

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

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

这是我当前的 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>

我什至为你们做了一个 jsfiddle：http: //jsfiddle.net/tAgEj/

我也试过.menuBox li a:hover + .cloudnav { display: block; }，但也没有用。

有什么作用？

4

1 回答 1

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>
于 2013-09-25T14:15:23.983 回答