jQuery Sibilings DIV show/hide mouseout trigger

Question

I am aware that they may be the same questions out there answered, i just can't seem to formulate my problem without showing my code:

I wish to have a DIV show on mouseover, however when i loose focus on the div the code naturally thinks i want it hidden again.. which i do but NOT when i change focus to the newly shown DIV. Any suggestions?

       $('.eventinfo2').mouseover(function(){
       $(this).parent().siblings('.snippetinfo').show();
   })
   $('.eventinfo2').mouseout(function(){
       $(this).parent().siblings('.snippetinfo').hide(); 

   });

the HTML:

<div class="container">
<div class="eventinfo2">
    ...
</div>
<div class="snippetinfo" style="display:none;">
...
</div>  

Any help appreciated. I'm assuming i either need to set a variable and a conditional ?

Answer 1

First of all, you can use mouseenter and mouseleave

You can easily target the group by wrapping them in a div

Secondly, in your code, eventinfo2 and snippetinfo are siblings. If necessary target siblings() not parent().sliblings() because the latter will refer to elements that are withing the same container as 'container'

Here you go EXAMPLE

   $('#foo').on('mouseenter', function(){
       $('.snippetinfo').show();
   })

    $('#foo').on('mouseleave', function(){
        $('.snippetinfo').hide(); 

   });