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) one
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?)
