Problem with jquery function.hover

Question

Hello,

I have make a javascript code. This is the code

/*************************/
/* twitter ticker        */
/*************************/
var nieuwsbrief_formulier_open = false;
$("#footer a.twitter").hover(

function()
{                   
    if(nieuwsbrief_formulier_open == false)
    {
        nieuwsbrief_formulier_open = true;
        $(this).parent('li').addClass('actief');
        $("#twitter").fadeIn(600);
    }
    else
    {
        nieuwsbrief_formulier_open = false;
        $(this).parent('li').removeClass('actief');
        $("#twitter").fadeOut(600);
    }
    return false;
}); 

When I hover on the #footer a.twitter. Then the #twitter div come/show. But when I going with the mouse off this #footer.a.twitter button. Then the div going away. How can I make, that when I'm going with the mouse over the #twitter div. That the div going not away but also show.

Who can help me ? Thanks !

Answer 1

You can make a few changes here, the biggest of which is to split your functions. .hover() takes 2 arguments as well, separate handlers for the mouseleave and mouseout events, like this:

$("#footer a.twitter").hover(function() {                   
   $(this).parent('li').addClass('actief');
   $("#twitter").fadeIn(600);
}, function() {
   $(this).parent('li').removeClass('actief');
   $("#twitter").fadeOut(600);
});

Then to solve your current issue, since #twitter isn't a child (or doesn't appear to be), you need to handle the hover on it, like this:

$("#twitter").hover(function() {
   $(this).stop().fadeIn();
}, function() {
   $(this).stop().fadeOut();
});

Answer 2

Thanks for your answer !