2013-02-04 275 views
3

我需要帮助。我正在做一个带有共享图标的下拉菜单。 我的问题是这样的:当我将鼠标移到页脚的主分享图标上并选择另一个图标(如Facebook)时,主图标仍然像鼠标悬停一样选中,但它不会没有用。CSS下拉菜单悬停

<div class="footer large blue">Footer Blue 
<div class="pull-right buttons"> 
    <ul> 
     <li><a class="btn2 large share2 blue" href="#">Share</a> 

      <ul> 
       <li><a class="btn large rss" href="#">RSS</a> 

       </li> 
       <li><a class="btn large twitter" href="#">Twitter</a> 

       </li> 
       <li><a class="btn large plus" href="#">G+</a> 

       </li> 
       <li><a class="btn large facebook" href="#">Fb</a> 

       </li> 
      </ul> 
     </li> 
     <li><a class="btn2 large btt blue" href="#">Back to Top</a> 

     </li> 
    </ul> 
</div> 

我认为问题是,元素一个,是两个独立的标签。

关注此图像更好地理解它我在说什么

http://db.tt/Kujz3Pv4

下面的代码(因为我无法解释它更好._。): http://jsfiddle.net/zPavan/KHWJ4/2/

如果有任何问题或对代码有任何建议,我感谢您的建议!

+0

+1嘛形成的问题!参见[this fiddle](http://jsfiddle.net/AGgpN/3/)[This answer](http://stackoverflow.com/a/8114664/757830)。 – NGLN

回答

4

而是取决于<a>专门的盘旋,使其依赖于包含整个<ul>列表项:

li:hover > .btn2.blue { 
    background-color: hsl(197, 59%, 30%); 
} 

我会建议给特定李象.share,你可以使用一个类以及。

http://jsfiddle.net/ExplosionPIlls/KHWJ4/3/

0

我想这会做到这一点:

.buttons ul li:hover > a { 
    background-color: #1f5f79; 
}