I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves away from the parent div.
$('.file-options').hide();
$('.file a img').mouseover(function(){
$(this).closest('.file').find('.file-options').slideDown();
});
$('.file a img').closest('.file').mouseout(function(){
$(this).find('.file-options').slideUp();
});
<div class="document">
<div class="file">
<a href="#"><img src="http://www.dermalog.com/images/pdf-icon.png" alt=""></a>
<div class="file-options showhouse-text">
<a href="#" onclick="return confirm('Are you sure you want to delete this file?');" class="show-tooltip" data-html="true" data-placement="top" data-original-title="Delete File">D</a>
<a href="#" class="show-tooltip" data-html="true" data-placement="top" data-original-title="Edit File">E</a>
</div>
</div>
</div>
If you would like to see the code in action, check out the jsfiddle http://jsfiddle.net/5vAFh/2/