Jquery在悬停时添加和删除文本，但在单击时不删除

Question

当我将鼠标悬停在#one 上时，我正在使用此代码显示一些文本。但是当我“悬停”或鼠标离开时，我希望文本消失。这很好用。当我点击#one 时出现问题，然后我希望该文本保留（但不会因为悬停时的 .empty 功能不允许。有什么想法吗？

<div class="info"><p></p></div>



$('#one').hover(function() {
        $('.info p').text('Some Text');
    },
        function() {
         $('.info p').empty();

    });

  $('#one').click(function()
        $('.info p').text('Some Text');

    });

Answer 1

当您点击#one 时，向.info 添加一个类，如.active，并将hover 的mouseout 部分更改为在info 为.active 时不触发

$('#one').click(function()
    $('.info p').addClass('active').text('Some Text');
});

$('#one').hover(function() {
    $('.info p').text('Some Text');
},
    function() {
     if (!$('.info p').hasClass('active')) {
         $('.info p').empty();
     }
});

Answer 2

我会使用 mouseleave 和 mouseenter 来绑定事件，这样你可以在点击处理程序中使用 $('#one').unbind('mouseleave') ，以防止鼠标移出时文本消失.然后在重新输入时重新绑定 mouseleave 处理程序。有点棘手。