Question

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

我一直在玩一些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');
});

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，则将从元素中删除所有类。然后添加你想要的Class。你可以这样做，例如：

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

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

PS。当然，您必须在style.css文件中放置“your_class”：）。

祝你好运

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

3 个答案: