你如何得到懸停，並點擊在jQuery中一起玩好？

Question

我試圖改變某些文本的樣式，當我將鼠標懸停在某個元素上時。在懸停時，我想將其更改爲不同的文本。點擊後，我想將其更改爲第三個值，並且不會在懸停時跳出。在懸停，懸停，懸停，懸停和點擊時，它應該保持不變。這一切都是有效的 - 除了第一次點擊之後，懸停在行動中工作正常，但懸停行動再也不會起作用。

一個簡單的應用就是在懸停時顯示一個「預覽」，但如果沒有點擊則會將鼠標懸停在外面。然而，點擊後，我希望它進行固定的更改，而不會丟失點擊後懸停/懸停功能。

我的猜測是我必須重新啓動mouseleave事件，但我會在哪裏應用它以及如何實施？

---

這裏是我到目前爲止已經試過：

HTML：

<a href="javascript{}" class="citation">click me</a> 

的Javascript：

var $j = jQuery.noConflict(); 
$j(document).ready(function() 
{ 
    $j('.citation').hover(function(event) 
    { 
     $j(this).html('hover in'); 
     $j(this).click(function(event) 
     { 
      event.preventDefault(); 
      $j(this).html('clicked'); 
      $j(this).off('mouseover mouseleave'); 
     }); 
    }, function() 
    { 
     $j(this).html('hover out');   
    }); 
}); 

FIDDLE

Answer 1

您沒有約束onclick事件，直到您mouseover工作正常，因爲您不能點擊沒有mouseover事件觸發點擊。在點擊事件中，您同時關閉mouseover和mouseleave，這將刪除所有懸停功能。 onclick事件仍然有效，因爲它已經綁定，但沒有進一步的影響。

我修改了代碼，所以它附加了每個事件而不是設置html，以便您可以查看哪些事件仍在激發。

這裏只有懸停事件發生時才懸停。如果發生點擊事件，則將其刪除以在點擊之後停止它。下一次懸停將再次綁定事件。

var $j = jQuery.noConflict(); 
$j(document).ready(function() 
{ 
    $j('.citation').on('mouseenter', function(event) { 
     $j(this).append($j('<div>', { html: 'hover in' })); 
     $j(this).on('mouseleave', function(event) { 
      $j(this).append($j('<div>', { html: 'hover out' }));   
     }); 
     } 
    ).on('click', function(event) { 
     event.preventDefault(); 
     $j(this).append($j('<div>', { html: 'clicked' })); 
     $j(this).off('mouseleave'); // hover out stopped 
    }); 
});