How to solve this overlapping hover issue
<p>I need to setup a hover button that can show a popup image when hovered and remove the popup image when hover out. My problem is that when I hover the button, the popup image pops and covers the button so it fires the hoverout event and remove the popup image even though the cursor is still on the button. How can I resolve this?</p>

<pre><code> $('.test').hover(function(){           
            imageId=$(this).next().attr('id');
            $('#div-' + imageId).show(150);
        },function (){
            $('#div-' + imageId).hide(150);
        })
</code></pre>
