Quiero agregar una clase al pasar el mouse pero no eliminarla cuando el mouse se va. En su lugar, debe eliminarse en el segundo desplazamiento del mouse. Entonces, al pasar el mouse, agregue la clase. Ratón deja restos de clase. El mouse pasa de nuevo la clase se elimina.
Este código agrega la clase, pero si el mouse sale, la clase se elimina, lo cual no es lo que estoy tratando de lograr.
jQuery('.menuButton').hover(function(){ jQuery('.mainMenuDrop').addClass('show') }, function() { jQuery('.mainMenuDrop').removeClass('show') });Para lograr su requisito de agregar en la primera entrada y eliminar en la segunda entrada, puede cambiar su código existente:
jQuery('.menuButton').hover(function(){ jQuery('.mainMenuDrop').addClass('show') }, function() { jQuery('.mainMenuDrop').removeClass('show') });para usar .toggleClass
jQuery('.menuButton').hover(function(){ jQuery('.mainMenuDrop').toggleClass('show') }, function() { // nothing here }); Como el enlace jquery .hover es solo una sintaxis para mouseenter y mouseleave y no necesita mouseleave , esto se puede simplificar a:
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>