您如何將鼠標懸停並單擊以在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');        
    });
}); 

小提琴

Answer 1

除非將mouseover在上面，否則您不會綁定onclick事件，因為mouseover事件無法觸發，您無法單擊它，因此效果很好。 在click事件中，您將同時關閉了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
    });
});