我怎樣才能更好地控制這個 jQuery UI 腳本，它會在 mouseover/mouseout 事件上為 div 添加一個疊加層？

Question

我正在為一個網站構建一個主頁，其中包含許多包含在<div>元素中的促銷鏈接。

為了讓它更有趣，我設計了一個疊加層<img> ，當用戶將光標懸停在相應的促銷上時，我希望它出現在<div> ，然后在光標移開時消失。 我正在使用 jQuery UI .toggle()效果打開和關閉它，如下所示：

$("#hp-promo-1").on("mouseover", function() {
  $("#promo-1-overlay").toggle("slide", {direction: "right"})
})

$("#hp-promo-1").on("mouseout", function() {
  $("#promo-1-overlay").toggle("slide", {direction: "right"})
})

盡管這確實有效，但就它打開和關閉疊加層而言，我在對其進行任何控制時遇到了問題。 有時，即使在mouseout移開事件之后，疊加層也會反復打開和關閉。

我可以向此代碼引入什么以確保覆蓋層滑動一次然后保持在mouseover ，然后滑下一次並在mouseout?上保持隱藏mouseout?

Answer 1

我通過用mouseenter和mouseleave替換mouseover和mouseout解決了這個問題。

該問題是由光標經過<div>包含的元素（例如文本）引起的，該元素觸發了mouseout事件，但mouseleave忽略了<div>包含的元素，並且僅在用戶的光標離開時觸發div 本身。