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

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.

Answer 2

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 3

This jQuery method is a bit more complicated, but it works well to sustain a hover over two elements. This example assumes you are using two separate DIV elements with id "div1" and "div2". This example also assumes one element will be a "trigger" (i.e. div1) and one element will be a "response" (i.e. div2). When a user's mouse hovers over the trigger, the response is displayed. When a user's mouse leaves both the trigger and the response, the response is hidden. I've used jQuery slideUp and slideDown as a transition effect, but any jQuery transition can substitute. I've also added a bit of padding and border style to help visually demonstrate this concept.

HTML:

<style>
    #div1 { padding: 20px; border: 1px solid #000000; }
    #div2 { padding: 20px; border: 1px solid #ff0000; }
</style>

<div id='div1'>Some Content</div>
<div id='div2'>Some Other Content</div>

The javascript code uses a setTimeout call to add a small delay to allow the mouse to transition from one DIV to another. If the two DIVs are positioned against each other, this timeout can be very small. Changing the value of "hover_timeout" will change the transition time allowance.

NOTE: the use of 'mouseenter' and 'mouseleave' is important for this example. For more details about the use of mouseenter vs mouseover, see this stack post: Jquery mouseenter() vs mouseover()

JAVASCRIPT:

var trigger_element = "#div1";
var response_element = "#div2";
var hover_timeout = 250; // milliseconds

function hideElement(waitTime)
{
    setTimeout(function() 
    {
        if (!$(trigger_element).is(":hover") && !$(response_element).is(":hover"))
        {
            $(response_element).slideUp();
        }
    },waitTime);
}

// trigger mouse enter
$(trigger_element).mouseenter (function() 
{
        $(response_element).slideDown();
});

// trigger mouse leave
$(trigger_element).mouseleave (function() 
{
    hideElement(hover_timeout);
});

// response mouse enter
$(response_element).mouseenter (function() 
{
    // do nothing
});

// response mouse leave
$(response_element).mouseleave (function() 
{
    hideElement(hover_timeout);
});

Answer 4

(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 ...