如何修復不起作用的 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"> 。