Best Practive For On A Hover?

I have this simple function that when you hover over an element its child element appears. When the user leaves (mouseout) the child element I then hide this, I also want it to hid

Solution 1:

The main problem is that there is a separation between your button and the pop up. So even if the ul is a child of #tweeter, since they are not hugging each other, the mouseout is triggered.

What i suggest you is to use a small timeout on the mouse out. A timeout that you clear on the mouse over. That will allow some time to go on the popup and prevent the hide().

Something like that :

$('#tweeter').on({
    mouseenter : function(e){
        var $this = $(this);
        clearTimeout($this.data('_timer'));
        $(this).find('ul').show();
    },
    mouseleave : function(){
        var $this = $(this);
        $this.data('_timer', setTimeout(function(){
            $this.find('ul').hide();
        },1000))
    }
});

Fiddle

Solution 2:

on mouseleave you target the .subicons class instead of the "#tweeter" try this http://jsfiddle.net/np1cb3k0/5/

$('#tweeter').on('mouseenter', function(e){
    //console.log('OOSH');
    e.preventDefault();
    $(this).find('ul').show();
});


$('#tweeter').mouseleave(function(){
    $(this).children('ul').hide();
});

Solution 3:

Your mouseleave event is attached to the subicons. It works fine after you hovered over the subicons first.