Question

当我将鼠标悬停在某个元素上时，我正试图改变某些文字的样式。在悬停时，我想将其更改为不同的文本。点击后，我想将其更改为第三个值，而不是在悬停时更改。悬停，悬停，悬停，悬停，然后单击，它应保持不变。这一切都有效 - 除了第一次点击后，悬停在行动中工作正常，但悬停动作再也不起作用了。

这个的简单应用是显示＆＃34;预览＆＃34;在没有点击的情况下悬停，但如果没有点击则改回。然而，点击一下，我希望它能够进行固定的更改，同时在点击后不会丢失悬停/悬停功能。

我的猜测是我必须重新开启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
    });
});

如何在jquery中悬停并点击一起玩？

1 个答案: