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中(如果可能的话).