CSS悬停更改其他类
CSS悬停更改其他类
提问于 2011-02-24 17:57:17
当我将鼠标悬停在一个对象上时，有没有办法改变另一个对象的类？当我将鼠标悬停在子菜单上时，菜单项必须更改。我有；
ul.menu .menulink {
padding:0px 13px 0px;
height:23px;
font-weight:bold;
width:auto;
}
ul.menu ul li:hover .menulink{
color:#002d36;
background-image:none;
background-color:#ffffff;
}HTML；
<ul class="menu" id="menu">
<li>
<a href="#" class="menulink"><span>Main menu item</span></a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>我也试过jQuery；
$('ul.menu ul li').mouseover(function(){
$('.menulink').css('color', '#002d36');
$('.menulink').css('background-color', '#ffffff');
});
$('ul.menu ul li').mouseout(function(){
$('.menulink').css('color', '');
$('.menulink').css('background-color', '');
});但这也改变了其他主菜单项。有人知道是怎么回事吗？提前感谢！
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-02-24 18:10:10
在css中，你不能向后选择对象。我昨天用jq写了一个小脚本，应该会有帮助。
$('.menu ul li').hover(function () {
$(this).parent('ul').parent('li').find('a.menulink').css('color', '#002d36');
},
function(){
$(this).parent('ul').parent('li').find('a.menulink').css('color', '#F00');
});编辑：
这很好用：http://jsfiddle.net/YBJHP/
Stack Overflow用户
发布于 2011-02-24 18:04:59
我认为使用纯CSS是不可能的。我推荐使用jQuery。使用jQuery可以很容易地做到这一点：
$('.menulink').hover(
function(){
$(this).css('background-color', '#New-Color-In-HEX');
},
function(){
$(this).css('background-color', '#Old-Color-In-HEX');
}
);Stack Overflow用户
发布于 2011-02-24 17:59:23
纯css无法做到这一点。我猜你正在尝试用css做下拉菜单。你可能想看一看suckerfish：
http://htmldog.com/articles/suckerfish/dropdowns/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5103012
复制相关文章
相似问题
腾讯云开发者
