Question

我有一个div元素，类名为event-element。当我悬停元素时，我希望它显示文本＆＃34;鼠标悬停！＆＃34;。当我点击我希望它显示的元素＆＃34;点击！＆＃34;到目前为止，我使用以下代码：

$(document).ready(function() {
    $('.event-element').hover(function(event) {
        $('.event-element').text("Mouse Over!");
    });
    $('.event-element').click(function(event) {
        $('.event-element').text("Clicked!");
    });
});

但是，在第二次悬停回调时，我需要显示文字＆＃34;鼠标左键！＆＃34;暗示鼠标不再悬停在元素上。任何关于如何使这项工作的建议都值得赞赏。

Answer 1

.hover()绑定了mouseenter和mouseleave事件。所以你会做这样的事情：

$(document).ready(function() {
    $('.event-element').hover(
        function(event) {
            $('.event-element').text("Mouse Over!");
        },
        function(event) {
            $('.event-element').text("Mouse Left!");
        }
    );

    $('.event-element').click(function(event) {
        $('.event-element').text("Clicked!");
    });
});

Answer 2

您需要使用hover，它为mouseenter和mouseout提供回调。其次，在函数内部，您可以使用$(this)而不是再次指定$('.event-element')。以下是工作演示：

$(document).ready(function() {
  $('.event-element').hover(function() {
    $(this).text("Mouse Over!");
  }, function() {
    $(this).text("Mouse Left!");
  });
  $('.event-element').click(function() {
    $(this).text("Clicked!");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='event-element'>element</div>

jQuery hover（）第二个回调

2 个答案: