如何修复不起作用的 jQuery hoverOut 函数？

Question

该网站可以识别鼠标何时悬停在元素上并在控制台中很好地打印，但是当我尝试控制台注销鼠标离开元素时，它不起作用。

 $('.designer').hover( function() { console.log("in"); $('.designer').html("<div class='designer-inner'><h1>DESIGN PROJECTS</h1></div>"); }, function() { console.log("out"); $('.designer').html("<div class='designer-inner'><h1>DESIGNER</h1></div>") } );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="designer"> <div id="designer-inner>"> <h1>DESIGNER</h1> </div> </div>

Answer 1

hover()是一个单独的事件，它会执行两次单一的函数，要执行 2 个不同的函数，你需要两个单独的单一事件处理程序。

 $(".hover").hover(function() { console.log("IN") }).mouseleave(function() { console.log("OUT") }); $(".menter").mouseenter(function() { console.log("IN") }).mouseleave(function() { console.log("OUT") });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: flex; gap:50px;"> <div class="hover" > <div id="designer-inner>"><h1>Hover</h1></div> </div> <div class="menter"> <div id="designer-inner>"><h1>Mouse Enter</h1></div> </div> </div>

mouseenter() mouseleave()

api.jquery.com/category/events/mouse-events

 $(".designer").mouseenter(function() { console.log("IN") }).mouseleave(function() { console.log("OUT") });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="designer"> <div id="designer-inner>"><h1>DESIGNER</h1></div> </div>

你必须使用 Mouseenter & Mouseleave

Answer 2

您的脚本吓坏了，因为您正在动态删除导致它触发的元素。 触发这些鼠标事件的是.designer的孩子。

一般而言，当仅更改一个文本时覆盖整个内容并不是一个好主意。 考虑这个更清洁的解决方案：

$('.designer').hover(function (event) {
  const isOn = event.type === 'mouseenter';

  $(this).find('.designer-inner h1').text(isOn ? 'DESIGN PROJECTS' : 'DESIGNER');
});

看看我是如何重构你的代码来做一些不同的事情的：

• 我在.hover()使用了一个参数，因为这两种情况都非常相似
• 我只是更新.text()中的.designer-inner h1的内部.designer覆盖里面的一切的这一翻译
• 我使用$(this)而不是$('.designer')来引用侦听事件的元素 - 这更快更干净，因为我们现在在代码中只引用一次特定元素而不是两次

另请注意，您的原始 HTML 中使用的是<div id="designer-inner>">而不是<div class="designer-inner"> 。