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>

Does this answer your question? [jQuery hover handler function not working on unhover after dynamically adding a class](https://stackoverflow.com/questions/38611101/jquery-hover-handler-function-not-working-on-unhover-after-dynamically-adding-a) — Akshay Hegde, Jul 08 '21 at 13:12
@AkshayHegde, there's no dynamic class involvement here. Only the contents are changed. — isherwood, Jul 08 '21 at 13:18
This one might be a duplicate, though: https://stackoverflow.com/questions/16748101/hover-and-hover-out-not-working-properly — isherwood, Jul 08 '21 at 13:20

kiran · Answer 1 · 2021-07-08T13:39:50.313

2

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

edited Jul 08 '21 at 13:39

answered Jul 08 '21 at 12:59

kiran

683
4
12

You should explain why, because that [doesn't seem to be the case](https://api.jquery.com/hover/). – isherwood Jul 08 '21 at 13:04
Hover is a single Event, executes single function, to execute 2 different function you'll need two separate event handlers https://api.jquery.com/category/events/mouse-events/ – kiran Jul 08 '21 at 13:13
A link isn't an explanation, and it belongs _in your answer_. – isherwood Jul 08 '21 at 13:15
1

@kiran you are wrong in this case, please take a look at the `.hover()` definition: `.hover( handlerIn, handlerOut )` – Robo Robok Jul 08 '21 at 13:29
@RoboRobok Yes i found out now there's an answer here https://stackoverflow.com/questions/17589420/when-to-choose-mouseover-and-hover-function – kiran Jul 08 '21 at 13:42

score 0 · Answer 2 · answered Jul 08 '21 at 13:47

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.

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

2 Answers2