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 中。