如何在單擊時切換鼠標懸停事件？

Question

我想在 Hover 上更改元素的顏色。 但是我想在單擊元素時禁用懸停效果並將單擊的元素設置為紅色。 再次，如果有人點擊元素，我想啟用懸停效果並應用懸停效果。

$('.divElement').on('mouseenter', function () {
    $(this).addClass('red');
});
$('.divElement').on('mouseleave', function () {
    $(this).removeClass('red');
});
$('.divElement').on('click', function () {
    $(this).removeClass('red');
    $(this).off('mouseenter mouseleave');
});

我試過這個 jQuery 代碼。

<div class="divElement">Element 1</div>
<div class="divElement">Element 2</div>
<span class="divElement">Element 3</div>
<div class="divElement">Element 4</div>

.divElement {
    color: blue;
}
.divElement.red {
    color: red;
}

Answer 1

使用mousedown事件。 單擊完成單擊后響應， mousedown在單擊完成之間起作用。

 $('.divElement').on('mouseenter', function () { $(this).addClass('red'); }); $('.divElement').on('mouseleave', function () { $(this).removeClass('red'); }); $('.divElement').on('mousedown', function () { $('.divElement').removeClass('red'); $(this).addClass('red'); $('.divElement').off('mouseenter mouseleave'); });

 .divElement { color: blue; } .divElement.red { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="divElement">Element 1</div> <div class="divElement">Element 2</div> <span class="divElement">Element 3</span> <div class="divElement">Element 4</div>

Answer 2

您嘗試過的只是禁用（ unbind ） Hover事件。 您實際需要的是在clicked toggle hover事件。

首先，我想建議您，將<span>標簽更改為<div>或為 class .divElemenT{ display:block;}添加CSS ，否則inline-block元素和block元素可能會同時懸停。

 var hoverEvent= true; $(".divElement").hover( function() { if(hoverEvent) $(this).toggleClass("red"); } ); $('.divElement').click(function() { $(this).toggleClass('selected'); $('.divElement').not(this).removeClass('selected,red');// remove this line if you want multiple selector hoverEvent= !hoverEvent; });

 .divElement { color: blue; display:block; } .divElement.red { color: red; } .selected{ font-weight:bold; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="divElement">Element 1</div> <div class="divElement">Element 2</div> <span class="divElement">Element 3</span> <div class="divElement">Element 4</div>

如果它不起作用，請發表評論。

Answer 3

我建議您創建一個hover類，表明該類是可懸停的。 然后在你的jQuery你可以針對與元素.hover類為您mouseenter和mouseleave假事件。 這意味着您可以簡單地切換每個元素的hover類，而不是關閉元素的事件偵聽器。

請參閱下面的工作示例：

 $(document).on('mouseenter', '.divElement.hover', function() { $(this).addClass('red'); }); $(document).on('mouseleave', '.divElement.hover', function() { $(this).removeClass('red'); }); $('.divElement').on('click', function() { $(this).toggleClass('hover'); });

 .divElement { color: blue; } .divElement.red { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="divElement hover">Element 1</div> <div class="divElement hover">Element 2</div> <div class="divElement hover">Element 3</div> <div class="divElement hover">Element 4</div>

注意：您需要使用$(document).on因為您在事件投標最初發生后動態更改類，允許您偵聽動態添加/更改的元素上的事件。

Answer 4

您切換類“紅色”的方法是正確的。 我只是稍微改變一下

HTML

<div class="divElement red">Element 1</div>
<div class="divElement red">Element 2</div>
<div class="divElement red">Element 3</div>
<div class="divElement red">Element 4</div>

CSS

.divElement {
    color: blue;
}
.divElement.red:hover, .divElement.selected {
    color: red;
}

查詢

$('.divElement').on('click', function () {
$(this).toggleClass('red selected');
});

這個想法是只在類“紅色”中設置懸停事件，然后我們在點擊時為元素切換紅色類。

Answer 5

嘗試這個

 $('.divElement').click(function(){ if($(this).hasClass("red")||$(this).hasClass("selected")){ $('.divElement').toggleClass("red"); $(this).toggleClass("selected"); } });

 .red:hover,.selected{ color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="divElement red">Element 1</div> <div class="divElement red">Element 2</div> <span class="divElement red">Element 3</span> <div class="divElement red">Element 4</div>