JQuery单击和悬停功能无法正常工作答案

【问题标题】：JQuery click and hover function not working correctlyJQuery单击和悬停功能无法正常工作
【发布时间】：2014-01-23 00:02:12
【问题描述】：

我有两个正在使用的按钮，我正在尝试制作悬停效果，并且当用户单击按钮时会发生单击事件。

我一直在玩一些 jquery 方法，例如 mouseover mouseout 等，但仍然没有运气。这个想法是让悬停只对尚未选择的元素起作用。

下面代码的问题是，一旦选择了按钮，如果用户将鼠标悬停在选定的方法上，它就会摆脱其当前状态。

一旦选择了按钮，它们是一种不摆脱当前状态的方法吗？

谢谢

$(".M").click(function(){
    $(this).css('background-color','#515B69');
    $(this).css('color','#fff');
    $(".F").css('color','#515B69');
    $(".F").css('background-color','#fff');   
});

$(".M").mouseover(function() {
    $(this).css('background-color','#515B69');
    $(this).css('color','#fff');
});

$('.M').mouseleave(function(){
    $(this).css('color','#515B69');
    $(this).css('background-color','#fff');
});

$(".F").click(function(){
    $(this).css('background-color','#515B69');
    $(this).css('color','#fff');
    $(".M").css('color','#515B69');
    $(".M").css('background-color','#fff');
});

$(".M").mouseover(function() {
    $(this).css('background-color','#515B69');
    $(this).css('color','#fff');
});

$('.F').mouseleave(function(){
    $(this).css('color','#515B69');
    $(this).css('background-color','#fff');
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我建议使用 CSS 卸载很多这些任务

.M, .F {
  background-color: #fff;
  color: #515B69;
}

.M.active, .M:hover,
.F.active, .F:hover {
  color: #fff;
  background-color: #515B69;
}

对于你的 JS

$('.M, .F').on('click', function () {
  $('.M, .F').removeClass('active');
  $(this).addClass('active');
});

【讨论】：

+1，你是第一个...... :)。不要偏离主题：toggleClass (api.jquery.com/toggleclass) 函数也很有帮助。
感谢您的帮助，但当用户将鼠标悬停在它摆脱它的点击状态时，我仍然遇到同样的问题
也制作 .M.active:hover 样式...也许这会有所帮助:)
@Jacek 你说得对，$.toggleClass() 效果很好。在这种情况下，您仍然希望$.removeClass() 在回调的第一行，因为它应用于所有按钮，无论是活动的还是非活动的，所以我们要确保我们从所有按钮中删除。这意味着第二行总是添加一个类，无论您是切换还是添加，最好是明确的。
@josephspens 是的。我在编辑之前在您的答案中看到了切换（据我所知），所以我决定对此做一个说明。感谢您提供信息，并大力支持。最好的问候。

【解决方案2】：

在 click 函数中设置一个变量，然后在 mouseover 和 mouseleave 函数中使用 if 语句检查它。例如：

var clicked = 0;

$(".F").click(function(){
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
$(".M").css('color','#515B69');
$(".M").css('background-color','#fff');
clicked = 1;
});

if (clicked > 0){
 $(".F").mouseover(function() {
 $(this).css('background-color','#515B69');
 $(this).css('color','#fff');
 });
}

【讨论】：

【解决方案3】：

我更喜欢使用 removeClass 和 addClass。如果您使用不带参数的 removeClass，则所有类都将从元素中删除。然后添加你想要的类。你可以这样做，例如：

$(selector).removeClass().addClass("your_class");

通过这种方式，样式与脚本分离，这始终是一种很好的做法。尝试以这种方式重写您的代码。如果您有任何问题，请在评论中提问，我会更新我的答案:)。

PS。当然，您必须将“your_class”放在 style.css 文件中:)。

最好的问候

【讨论】：