Hello, I am having some problems with a hover state function. I have an unordered list, with images, and have a tooltip type javascript function on the hoverstate, the tooltip is displayed directly on top of the image. The content of the tooltip is inside an <em> tag, which is hidden via the CSS. The tooltip pops up on a hover state using an animating opacity. The problem that I am having is that once the popup is displayed, the hoverstate turns off, as the mouse is now considered hovering over the <em> and the tooltip dissipates.
To see an example of this shift, please take a look at: http://heimmade.com/index.php?c=12 and try hovering over the thumbnail images at the bottom of the page. Thanks! below is the code.... ==================== JQUERY>>>>>>>>>>>> ==================== <script type="text/javascript"> $(document).ready(function(){ $("#movers-row a").hover( function(over) { $(this).next("em.hover").animate({opacity: "show", top: "45"}, "slow"); }, function(out) { $(this).next("em.hover").animate({opacity: "hide", top: "50"}, "slow"); }); }); </script>. ==================== <<<<<<<<<<<<JQUERY ==================== ==================== HTML>>>>>>>>>>>>>> ==================== <ul id="movers-row"> <li class='thumbnail'> <a href='# 1'><img src="images/product/ 2ebb87483823eda8cd920ef0273bd3d0.jpg" alt='' /></a> <em class='hover'>grass roots</em> </li> <li class='thumbnail'> <a href='# 2' ><img src="images/product/ dbd1538fd3f3b6169c1bdca40011f4ac.jpg" alt='' /></a> <em class='hover'>grin and bare it</em> </li> </ul> ==================== <<<<<<<<<<<<<<<HTML ====================
