jQuery click and Hover功能无法正常工作

Question

我有两个按钮，我正在尝试悬停效果，当用户点击按钮时，请单击事件。

我一直在玩一些诸如MouseOver Out之类的jQuery方法，但仍然没有运气。这个想法是让悬停在尚未选择的元素上工作。

以下代码的问题是，如果用户徘徊在所选方法上，则选择了一个按钮。

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

谢谢

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

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

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

Answer 3

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

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

这样，样式与脚本分开，这是始终的好习惯。尝试以这种方式重写您的代码。如果您有任何疑问，请在评论中询问，我将更新答案：）。

ps。当然，您必须将" your_class"放在style.css file：）。

最好的问候