我需要帮助。我正在做一个带有共享图标的下拉菜单。 我的问题是这样的:当我将鼠标放在页脚中的主要共享图标上而不是去选择另一个图标(如facebook)时,我会喜欢这样,主图标仍然被选中,如鼠标悬停,但它不是工作。
<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>
我认为问题是元素 li 和 a 是两个独立的标签。
观看此图片以便更好地理解我在说什么(因为我无法更好地解释它._。)
这是代码: http://jsfiddle.net/zPavan/KHWJ4/2/
如果有任何问题或对代码有任何建议,我感谢您的建议!
答案 0 :(得分:4)
不依赖于<a>
专门悬停,而是依赖于包含整个<ul>
的列表项:
li:hover > .btn2.blue {
background-color: hsl(197, 59%, 30%);
}
我建议给那个特定的li一个类似.share
的类,你可以使用它。
答案 1 :(得分:0)
我认为这样做会:
.buttons ul li:hover > a {
background-color: #1f5f79;
}