jQuery .fadeTo(),如何淡出菜单内的非活动链接?

发布于 2024-11-01 22:45:54 字数 684 浏览 1 评论 0原文

我有一个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

你在看孤独的风景 2024-11-08 22:45:54

嘿,你尝试过使用 .not()

应该是这样的:

$('a').not(':hover');

.not()

Hey, did you try using .not()

should be something like this:

$('a').not(':hover');

.not()

只涨不跌 2024-11-08 22:45:54

您可以结合使用 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文