Question

I’m having trouble with a mouseover function, I have a div and when hovering over it, it’s child div is faded in and faded out on mouseleave. The child div shows up just fine, but when you move the mouse over, it keeps fading in and out and it’s just irritating.
Here’s a fiddle: http://jsfiddle.net/NK2mt/1/ and my jQuery function here too:

jQuery(document).ready(function(){

jQuery(".hover").hide();

    jQuery('.grid-block').mouseover(function() {
        jQuery(this).children('.hover').stop(true, true).fadeIn();
        });

    jQuery('.grid-block').mouseout(function() {
        jQuery(this).children('.hover').stop(true, true).fadeOut();
        });   
        return false; 
});

It’s when you move the mouse over .block-text-sub that the div fades out and in again, but I can’t seem to find a fix for it.

Answer 1

Use ‘mouseenter’ instead of ‘mouseover’ and ‘mouseleave’ instead of ‘mouseout’, when you use ‘mouseout’ it fires every time ‘mouseout’ occurs on any inner element of the main div and same for ‘mouseover’:

 jQuery(document).ready(function(){

    jQuery(".hover").hide();

        jQuery('.grid-block').mouseenter(function() {
            jQuery(this).children('.hover').stop(true, true).fadeIn();
            });

        jQuery('.grid-block').mouseleave(function() {
            jQuery(this).children('.hover').stop(true, true).fadeOut();
            });   
            return false; 
    });