jQuery: Sustain a hover over two elements

Question

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

Answer 1

Do you mean your div is placed over your image?

If that's the case, you could assign the mouseout functionality to the div instead the image:

$('.navigation_spec1_panel').hide().css('opacity','0.0');

$('.navigation_spec1').mouseover(function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '337px', 
          height: '234px',
          opacity: 1.0 }, 
        1250 ); 
    };
});

$('.navigation_spec1_panel').mouseout(function() { 
    $(this).animate({ 
          width: '1px', 
          height: '1px',
          opacity: 0.0 }, 
        1250); 
    });
});

Answer 2

(NOTE: This is an acceptable answer for myself, but because the initial conditions have changed. I believe the question is still viable)

I have altered my code to not use a <div> with an <a> inside, but instead use an <a> with the sizing and background image. In this way, I have only the one tag and make the previous error moot. I have not tested this in IE yet, however ...

Answer 3

Option 1: Put the img and the div within another div and set the events on that outer div.

Option 2: Use setTimer on mouseout-event for both elements, and clearTimer on mouseover-event for both elements, this creating a small time span for the focus to move without triggering the fade-away-code.