jQuery悬停和点击功能答案

【问题标题】：jQuery hover and click functionjQuery悬停和点击功能
【发布时间】：2010-10-26 10:51:15
【问题描述】：

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

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

我怎样才能修改这个脚本，以便当我点击一个链接时它保持颜色不悬停，当我把鼠标移开时它不会改变？

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

【问题讨论】：

标签： jquery click hover

【解决方案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 中它所属的位置（如果可能的话）。

【讨论】：

我不认为切换是想要的效果。我相信 Bogdan 一次只想激活 1 个链接。
@Justus - 在这种情况下，您可以将 $(this).toggleClass('clicked'); 替换为 $('a.menua').removeClass('clicked'); $(this).addClass('clicked');

【解决方案2】：

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

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

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

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

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

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

【讨论】：

【解决方案3】：

使用元素。数据：

$('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 版本可能是更好的选择。

【讨论】：

【解决方案4】：

我想你想要这个： live solution

所以，我使用 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");
});

【讨论】：

【解决方案5】：

点击后添加类。

css

.somecolor {color:#2EC7C7}

js

$('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'});
});

【讨论】：

点击另一个链接后，我可以删除该类吗？
@Bogdan - 请不要这样做，这里没有理由为样式使用悬停事件，即使在 IE6 中也可以在纯 CSS 中使用。

【解决方案6】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：

如果您只想激活一个，这可以通过更简单的方式完成，请参阅上面的更新答案。