Blinking when moving over h1 tag

Question

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.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <img class="content1" src="http://upload.wikimedia.org/wikipedia/commons/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>

How is it blinking? Which browser? Fine here in ff and chrome — StudioTime, Apr 17 '15 at 08:10
It seems to be firing the mouseout function then immediately firing the mouseover. — Liam, Apr 17 '15 at 08:12
mouseenter/mouseleave problem? Maybe due to margins or something on `h1`? — CodingIntrigue, Apr 17 '15 at 08:12

score 6 · Accepted Answer · answered Apr 17 '15 at 08:12

6

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.net/j3zqgsou/

answered Apr 17 '15 at 08:12

techfoobar

65,616
14
114
135

1

@Pranav C Balan: Note: `pointer-events: none` is not available on legacy browsers. – iCollect.it Ltd Apr 17 '15 at 08:43

score 6 · Answer 2 · answered Apr 17 '15 at 08:12

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.com/mouseover/

at the bottom.

This can be proven by using a simple CSS line :

h1{
    pointer-events: none;
}

Which makes the H1 tag completely transparent to the mouse.

Fiddle! https://jsfiddle.net/yy5afj0o/

score 1 · Answer 3 · edited May 23 '17 at 10:34

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.net/qvuj48yr/1/

Information: Jquery mouseenter() vs mouseover()

Blinking when moving over h1 tag

3 Answers3