Jquery mouseover and mouseout issue

Question

I was making a custom play pause button to my video . However when I mouse over the button the button will keep blinking . Any idea stop the blinking when I mouse over the button ? Thanks

 $('#fullplay') .mouseover(function () { $('#playpausevideo').fadeIn(); }) .mouseout(function () { $('#playpausevideo').fadeOut(); }); 

 .container{ } .playpausevideo{ height:100px; width:100px; position:absolute; background-image:url('/../../Images/onbigplan/bigfullplay.png'); background-repeat:no-repeat; background-position:center; cursor:pointer; display:none; background-color:#000; z-index:99999; } .playpausevideo.selected{ height:100px; width:100px; position:absolute; background-image:url('/../../Images/onbigplan/bigfullpause.png'); background-repeat:no-repeat; background-position:center; cursor:pointer; background-color:#ff0000; z-index:99999; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div id="playpausevideo" class="playpausevideo noselected"></div> <video id="fullplay" autoplay muted loop poster="" width="400px" height:="300px"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" /> </video> </div> 

Answer 1

You could wrap your video and button into a div, and listen mouseenter and mouseleave events on that div.

Here's a jsfiddle example : http://jsfiddle.net/jp5ru8vz/