How can I fix a jQuery hoverOut function that isn't working?

Question

The website recognizes when the mouse is hovering on the element and prints in very well in the console, but when I tried to console log the out for when the mouse leaves the element, it doesn't work.

 $('.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() is a single event which will execute single function twice, to execute 2 different function only once you'll need two separate single event handlers.

 $(".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>

You have to use Mouseenter & Mouseleave

Answer 2

Your script freaks out, because you're dynamically removing elements that caused it to fire. It's the children of your .designer triggering these mouse events.

In general, it's not a good idea to overwrite entire content when it's just one text changing. Consider this cleaner solution:

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

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

See how I refactored your code to do a couple of things differently:

• I'm using a single parameter in .hover() , because both cases are extremely alike
• I'm only updating the .text() of the .designer-inner h1 inside the .designer intead of overwriting everything inside
• I'm using $(this) instead of $('.designer') to reference the element listening to the event - that's faster and cleaner, because we're now referencing the specific element only once in the code instead of twice

Please also notice that you're having <div id="designer-inner>"> instead of <div class="designer-inner"> in your original HTML.