在悬停时添加一个类在第二次悬停时删除类

Question

我想在悬停时添加一个类，但在鼠标离开时不将其删除。 相反，它必须在第二次鼠标悬停时删除。 所以在鼠标悬停时添加类。 鼠叶类依然。 鼠标再次悬停类被删除。

这段代码添加了类，但如果鼠标离开类，则会删除该类，这不是我想要实现的。

jQuery('.menuButton').hover(function(){
  jQuery('.mainMenuDrop').addClass('show')
}, function() {
  jQuery('.mainMenuDrop').removeClass('show')
});

Answer 1

要实现在第一次输入时添加并在第二次输入时删除的要求，您可以更改现有代码：

jQuery('.menuButton').hover(function(){
  jQuery('.mainMenuDrop').addClass('show')
}, function() {
  jQuery('.mainMenuDrop').removeClass('show')
});

使用 .toggleClass

jQuery('.menuButton').hover(function(){
  jQuery('.mainMenuDrop').toggleClass('show')
}, function() {
  // nothing here
});

---

在jQuery .hover结合只是语法mouseenter和mouseleave ，你不需要mouseleave ，这可以简化为：

 jQuery('.menuButton').on("mouseenter", function() { jQuery('.mainMenuDrop').toggleClass('show'); });

 div { border: 1px solid black; padding: 20px; width: 100px; } .show { background-color: pink; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='menuButton'>point at me</div> <div class='mainMenuDrop'>changes here</div>