jQuery單擊和懸停功能無法正常工作

Question

我有兩個正在使用的按鈕，正在嘗試產生懸停效果，並且當用戶單擊按鈕時會發生clicked事件。

我一直在玩一些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，則將從元素中刪除所有類。 然后添加所需的類。 您可以這樣進行操作，例如：

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

這樣，樣式便與腳本分開了，這總是一個好習慣。 嘗試以這種方式重寫您的代碼。 如果您有任何疑問，請在評論中提問，我將更新我的答案:)。

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

最好的祝福