jQuery .fadeTo(),如何淡出菜单内的非活动链接?
我有一个 ul li 菜单,我只想创建具有 :hover 状态的链接,不透明度为 1.0,其他菜单将设置为 0.5 之类的值。因此,每次鼠标悬停在链接上时,它都会保持其不透明度 1.0,而其他链接的不透明度会更改为 0.5。 jQuery 中是否有与 !:focus、!:hover 或 !:active 相关的东西?我看到有 blur() 但我想它不适合这种情况,因为我需要那些不活跃的而不是那些失去焦点的。
--编辑过-- 使用 :not() 而不是 .not() 效果更好。 所以这是有效的:
$('#menu > li > a').bind({
mouseenter: function(){
$('#menu > li > a:not(:hover)').fadeTo('slow', 0.5).stop(true,true);
},
mouseleave: function() {
$('#menu > li > a').fadeTo('slow', 1.0).stop(true,true);
}
});
I have an ul li menu which I want to make only the link with the :hover state with the opacity 1.0 the others will be set to something like 0.5. So each time the mouse is over the link it keeps its opacity, 1.0, and the others get their opacity changed to 0.5.
Is there a somenthing linke a !:focus, !:hover or !:active in jQuery? I see that there is blur() but it doesn't fit the case, I guess, because I need those that are not active and not those that lost focus.
--edited--
It work better with :not() instead of .not().
So this is working:
$('#menu > li > a').bind({
mouseenter: function(){
$('#menu > li > a:not(:hover)').fadeTo('slow', 0.5).stop(true,true);
},
mouseleave: function() {
$('#menu > li > a').fadeTo('slow', 1.0).stop(true,true);
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
嘿,你尝试过使用 .not()
应该是这样的:
.not()
Hey, did you try using .not()
should be something like this:
.not()
您可以结合使用 not() 方法使用 :focus、:hover 或 :active 选择器。
编辑:
或者,如果您愿意,您可以像这样使用 CSS 工作 jsFiddle 演示。根据您的评论,这就是您想要的:淡入淡出动画 jsFiddle。
You can use the not() method combined with your :focus, :hover, or :active selectors.
EDIT:
Or if you want to, you can just use CSS like in this working jsFiddle demo.Based on your comments, here is what you want: fade animated jsFiddle.