I have the following code which shows some text when hovering the image. But there is some problem when cursor is moving over h1 tag, It's blinking at that time. Why it's happening?

jQuery(function($) {
  $('.content1').mouseover(function() {
    $('.content').show();
  });
  $('.content').mouseout(function() {
    $('.content').hide();
  });
});

<script src=".11.1/jquery.min.js"></script>
  <img class="content1" src=".svg/2000px-HTML5_logo_and_wordmark.svg.png" style="width:100%;position:relative">
  <div class="content" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; color: white; display: none; background: rgba(0, 0, 0, 0.901961);">
    <h1 style="color:white">hiiiiiiiiiiiiiiiiiii</h1>
  </div>

I have the following code which shows some text when hovering the image. But there is some problem when cursor is moving over h1 tag, It's blinking at that time. Why it's happening?

jQuery(function($) {
  $('.content1').mouseover(function() {
    $('.content').show();
  });
  $('.content').mouseout(function() {
    $('.content').hide();
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <img class="content1" src="http://upload.wikimedia/wikipedia/mons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" style="width:100%;position:relative">
  <div class="content" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; color: white; display: none; background: rgba(0, 0, 0, 0.901961);">
    <h1 style="color:white">hiiiiiiiiiiiiiiiiiii</h1>
  </div>

• javascript
• jquery
• html

• ...and it happens in Chrome, just to add... (firefox is ok) – sinisake Commented Apr 17, 2015 at 8:09
• How is it blinking? Which browser? Fine here in ff and chrome – StudioTime Commented Apr 17, 2015 at 8:10
• I can see it BTW. Using Chrome. Though it is quite subtle. – Liam Commented Apr 17, 2015 at 8:10
• @nevermind me also using chrome.. – Pranav C Balan Commented Apr 17, 2015 at 8:11
• 2 mouseenter/mouseleave problem? Maybe due to margins or something on h1? – CodingIntrigue Commented Apr 17, 2015 at 8:12

3 Answers 3

The reason for this is that when the mouse is over the <h1>, a mouseout is triggered on .content. To fix this, use pointer-events: none; for the <h1>. Read about pointer-events on MDN.

<h1 style="color:white; pointer-events: none;">hiiiiiiiiiiiiiiiiiii</h1>

Demo: http://jsfiddle/j3zqgsou/

The issue is you're using "mouseover", this fires an event every time you switch containers with your mouse. for example, you can see this silly behaviour here :

https://api.jquery./mouseover/

at the bottom.

This can be proven by using a simple CSS line :

h1{
    pointer-events: none;
}

Which makes the H1 tag pletely transparent to the mouse.

Fiddle! https://jsfiddle/yy5afj0o/

You can use following CSS to prevent it:

h1 {
    pointer-events: none;
}

I also tried to use mouseenter instead of mouseover and mouseleave instead of mouseout.

This worked for me:

jQuery(function($) {
  $('.content1').mouseenter(function() {
    $('.content').show();
  });
  $('.content').mouseleave(function() {
    $('.content').hide();
  });
});

Fiddle: http://jsfiddle/qvuj48yr/1/

Information: Jquery mouseenter() vs mouseover()