我的问题是:
我有一个下拉菜单,我希望当我将菜单悬停在菜单上时,文本颜色会发生变化,当我将鼠标悬停在子菜单上时,悬停状态将保持不变。我使用这段代码:
$("ul li").hover(function () {
$(this).stop().animate({ backgroundColor: "white"}, 500);
},
function () {
$(this).stop().animate({ backgroundColor: "black"}, 400);
});
}
在菜单和子菜单中悬停时为背景颜色设置动画。
我想在悬停时更改文本的颜色(不同的菜单和子菜单,而不是相同的颜色动画)。为此我使用此代码:(子菜单示例,对于菜单示例,将选择器更改为$('ul.menu li a')
$('ul.submenu li a').hover(function () {
$(this).css({color:'#FFFFFF'});
},
function () {
$(this).css({color:'#00FF00'});
});
全部这样可以正常工作,但是当我将鼠标菜单悬停时,菜单会返回原始颜色状态(因为在菜单上悬停时会激活鼠标左键)。
我想要的是,当我悬停子菜单时,菜单中的悬停状态也会保持活动状态。
我尝试了很多东西,但都给了我一些问题,唯一有用的东西就是css,但我也需要控制文本的颜色。
有效的CSS:
ul li:hover a {
color: #FFF;
}
(使用这个css代码我用css控制菜单颜色,当我徘徊子菜单时菜单保持活动状态,但子菜单使用jquery .hover)。
任何人都可以帮忙吗?谢谢!
HTML菜单:
<ul class="menu">
<li><a href="#">text</a></li>
<li><a href="#">text</a>
<ul class="submenu">
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
</ul>
</li>
<li><a href="#">text</a>
</ul>
答案 0 :(得分:0)
如果您希望悬停设置当前颜色,直到您悬停其他一些li,请使用类。
的CSS:
ul.submenu li a { color: #0f0; }
ul.submenu li a.hovered { color: #fff; }
JS:
$('ul.submenu li a').mouseover( function() {
if (!$(this).hasClass('hovered')) {
$('ul.submenu li a.hovered').removeClass('hovered');
$(this).setClass('hovered');
}
});
我希望我能正确理解你。祝你的项目好运。
[编辑]
哦,嗯,也许你想要它,所以当你去子菜单时,你的父母李不应该失去它的颜色,尽管你躲避了。如果是这样,同样的想法是适用的,你只需要鼠标悬停代码选择菜单项鼠标悬停(因此鼠标悬停在菜单上取消设置所有其他菜单并设置此菜单),然后你还需要让它删除你的菜单的类颜色,如果你鼠标超出其子菜单的ul。我不知道你的菜单在结构方面是什么样的,所以我不能评论这个选择器的工作CSS。
哦,最后你想要一个css规则与子菜单悬停来处理子菜单的突出显示。
对不起那个漫无边际的回答...