CODEWITHSUNDEEP
jqueryhtml
sojutyp
sojutyp

Reputation: 316

jQuery mouseout behavior issue

I have a very odd problem using mouseenter and mouseout on a div. If I hover the text in my div coming from above or below, everything works fine. The "toggle" text <p style="padding-left: 30px;">text</p> will show and when I remove the mouse, the text disappears.

But if I hover the div coming from the left or right side, the mouseout event triggers instantly and the text disappears again.

I didn't delete the CSS because some of that might cause the problem? Help would be very much appreciated! Thanks!

jQuery(document).ready(function() {
  jQuery("#fuss_hover").on({
    mouseenter: function() {
      jQuery("#fuss_ak").fadeIn(500);
    }
  });
  jQuery("#fuss_hover").on({
    mouseout: function() {
      jQuery("#fuss_ak").fadeOut(500);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fuss_hover" style="margin: 6px 0px 6px 90px; width: 48%;"><span style="font-family: 'book antiqua',palatino; font-size: 14pt;">*</span><span style="font-family: 'book antiqua',palatino; font-size: 14pt; border-bottom: 1px dotted #000; cursor: help;">Mouseover Text</span>
</div>
<div id="fuss_ak" style="display: none; margin: 8px 0px 8px 90px; width: 75%;">
  <p style="padding-left: 30px;">text</p>
</div>

Upvotes: 1

Views: 28

Answers (4)

Arsh Kalsi
Arsh Kalsi

Reputation: 179

jQuery(document).ready(function() {
  jQuery("#fuss_hover").on({
    mouseenter: function() {
      jQuery("#fuss_ak").fadeIn(500);
    }
  });
  jQuery("#fuss_hover").on({
    mouseout: function() {
      jQuery("#fuss_ak").fadeOut(500);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fuss_hover" style="font-family: 'book antiqua',palatino; font-size: 14pt;padding: 6px 0px 6px 90px; width: 100%;">*Mouseover Text 
</div>
<div id="fuss_ak" style="display: none; margin: 8px 0px 8px 90px; width: 75%;">
  <p style="padding-left: 30px;">text</p>
</div>

Upvotes: 0

Sahil Dhir
Sahil Dhir

Reputation: 4250

you can use delay() when you are triggering mouse out.

jQuery(document).ready(function() {
        jQuery("#fuss_hover").on({
            mouseenter: function() {
                jQuery("#fuss_ak").fadeIn(500);
            }
        });
        jQuery("#fuss_hover").on({
            mouseout: function() {
                jQuery("#fuss_ak").delay(500).fadeOut(100);
            }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fuss_hover" style="margin: 6px 0px 6px 90px; width: 48%;"><span style="font-family: 'book antiqua',palatino; font-size: 14pt;">*</span><span style="font-family: 'book antiqua',palatino; font-size: 14pt; border-bottom: 1px dotted #000; cursor: help;">Mouseover Text</span>
</div>
<div id="fuss_ak" style="display: none; margin: 8px 0px 8px 90px; width: 75%;">
    <p style="padding-left: 30px;">text</p>
</div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is a combination of your use of mouseout and the fact that you don't stop() successive events from adding new animations on the queue.

To fix this use mouseleave and call stop(true) before fadeIn/fadeOut. You can also then simplify the code to simply use hover() (as it uses both the previously mentioned events) and use fadeToggle().

I'd also strongly suggest you use an external stylesheet over inline CSS. Try this:

$("#fuss_hover").hover(function() {
  $("#fuss_ak").stop(true).fadeToggle(500);
});
#fuss_hover {
  margin: 6px 0px 6px 90px;
  width: 48%;
  font-family: 'book antiqua', palatino;
  font-size: 14pt;
}
#fuss_hover .text {
  border-bottom: 1px dotted #000;
  cursor: help;
}
#fuss_ak {
  display: none;
  margin: 8px 0px 8px 90px;
  width: 75%;
}
#fuss_ak p {
  padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fuss_hover">
  <span>*</span>
  <span class="text">Mouseover Text</span>
</div>
<div id="fuss_ak">
  <p>text</p>
</div>

Upvotes: 1

C3roe
C3roe

Reputation: 96281

mouseout fires as soon as any other element than the target is hovered - and that includes child elements.

The proper counterpart to mouseenter is mouseleave, not mouseout.

Upvotes: 1

Related Questions