在h1标签上移动时闪烁

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> 

Answer 1

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/

Answer 2

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/

Answer 3

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()