jQuery 悬停和单击功能

Question

我有 4 个链接，可以更改网页内 4 个 div 的位置。当我将鼠标悬停在链接上时，我使用以下 jQuery 脚本来更改链接的颜色。

    $('a.menua').hover(function(){
    $(this).css({'color':'#2EC7C7'});
},
function(){
    $(this).css({'color':'white'});
});

我如何修改此脚本，以便当我单击链接时，它可以保持颜色不悬停，并且当我将鼠标从其上移开时不会改变？

$('a.menua').click(function(){
     //content
});

Answer 1

我将使用 CSS 来实现所有样式，如下所示：

a.menua { color: white; }
a.menua:hover, a.menua.clicked { color: #2EC7C7; }

然后仅使用 jQuery，只需使用 切换该类。像这样的toggleClass()：

$('a.menua').click(function(){
   $(this).toggleClass('clicked');
});

或者，如果您一次只需要一个活动：

$('a.menua').click(function(){
   $('a.menua').removeClass('clicked');
   $(this).addClass('clicked');
});

这会使您的代码更简单、更轻且更易于维护。它还将样式信息保留在它所属的位置（如果可能的话），即 CSS 中。

Answer 2

唯一需要 JS 的部分是让链接在鼠标离开后保持相同的颜色。仅 CSS 就可以让您控制鼠标悬停时（使用 a:hover）和鼠标单击期间（使用 a:active）时的颜色。

Craver 建议使用 jQuery 添加一个类，应该在您离开后保留颜色，正如他所说，将样式信息保留在 CSS 中是很好的。

如果您使用所有四种可能的链接样式，请确保按以下顺序放置它们：

a:link { }
a:visited { }
a:hover { }
a:active { }

您可以用 LoVe HAte 来记住它 - 链接、已访问、悬停、活动。

另一种想法 - 您试图在悬停和单击期间使链接颜色相同。我建议让它们有点不同可能会更好。点击过程中颜色的变化会给用户视觉反馈，表明他们击中了目标。

Answer 3

使用 element.Data：

$('a.menua').hover(function(){
    $(this).css({'color':'#2EC7C7'});
}, function(){
    if($(this).data("is-clicked") === false){
        $(this).css({'color':'white'});
    }
}).live("click", function(){
    $(this).data("is-clicked", !$(this).data("is-clicked"));
});;

但是 Nicks css 版本可能是更好的选择。

Answer 4

我想你想要这个：
实时解决方案

因此，我使用 jQuery 向链接添加类。我还将脚本设置为一次只允许一项处于活动状态（这是此解决方案与 Nick 的解决方案之间的主要区别）。

更新：

悬停效果现在也是基于 CSS 的（这就是 :hover 伪类的用途）。因此，您只需使用 jQuery 来设置链接的“活动”状态。

HTML：

<a class="menulink" href="#">Link 1</a>
<a class="menulink" href="#">Link 2</a>
<a class="menulink" href="#">Link 3</a>

CSS：

a { color: #00f; }
a:hover, a.active { color: #f00; }

JS：

$('.menulink').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});

Answer 5

点击后添加一个班级。

js

.somecolor {color:#2EC7C7}

​

$('a.menua').click(function(){
    var $this = $(this);
    if($this.hasClass("somecolor")){
        $(this).removeClass("somecolor");
    }else{
        $(this).addClass("somecolor");
    }
});

$('a.menua').hover(function(){
    $(this).css({'color':'#2EC7C7'});
},
function(){
    $(this).css({'color':'inherit'});
});

Answer 6

我还没有测试过，但这可能有效：

$('a.menua').click(function(){
    $('a.menua').unbind('mouseleave');
});

Answer 7

js：

var link='null';
$('a.menua').click(function(){
    $(link).removeClass('clicked');
        $(this).addClass('clicked');
    link=$(this);

CSS：

a.menua {
    color: white;
    text-decoration:none;
}
a.menua:hover, a.menua.clicked {
    color: #2EC7C7;
}