I have an <img> that, once hovered over, animates and fades in the
<div> of a larger version of the picture, along with text and a
hyperlink. When mousing out, the <div> animates and fades away. This
works fine, only my hover function only pertains to the <img> itself.
As soon as either a) the <div> appears over the <img>, or b) once
mouses off the <img> to get to the <div>, jQuery reads a mouseout and
animates the <div> away. How do I re-write my jQuery to allow me to
fix this? Thanks in advance ...
Here is a portion of the HTML:
<img runat="server" src="~/images/pc_blocks_navigation_spec1.gif"
class="navigation_spec1" alt="" />
<div class="navigation_spec1_panel"><p>filler <a href="#">test</a></
p></div>
... and the jQuery ...
$('.navigation_spec1_panel').hide().css('opacity','0.0');
$('.navigation_spec1').hover( function() { $
('.navigation_spec1_panel').animate({ width: '337px', height: '234px',
opacity: 1.0 }, 1250 ); }, function() { $
('.navigation_spec1_panel').animate({ width: '1px', height: '1px',
opacity: 0.0 }, 1250 ); });
(Side comment: My animated <div> does not appear over / on top of
other <div>s coded after this one in IE 6 or 7. The <div> appears
behind them instead, regardless of z-index. Suggestions?)
