CSS懸停在雲導航中不起作用

這是我第一次以這種方式使用CSS懸停。但它不起作用。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>

我還送的jsfiddle爲你們：http://jsfiddle.net/tAgEj/

我也試過.menuBox li a:hover + .cloudnav { display: block; }但沒」不管工作。

什麼？

來源

2013-09-25 AgeDeO

[**是這**]（http://jsfiddle.net/tAgEj/1/）你想要什麼？它不是'li'的兄弟，所以你可以將它應用到'ul' –

它不適用於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-25 14:15:23

CSS懸停在雲導航中不起作用

回答

相關問題