jquery if mouseover

I have a img with a hover function to reveal an element. Some of this new element overlaps the img so if I then hover over the new element, because the cursor is no longer over the img, the element hides itself and then instantly reappears because the cursor is over the img again. I need to somehow ignore the mouseout command if the cursor is over the img which is within the new element (the only part of the new element which is overlapping the main image).

It's a tricky one to explain but here's the code:

jquery (with bit i'm not sure how to do)

$("div > img").hover( function() {

        $(this).parent().find("span").slideDown(100);

    }, function() {

        if (user is hovering over the span) {
                    // do nothing
        } else {
            $(this).parent().find("span").slideUp(100);
        }
    });

html

<div>
    <img src="/images/icons/dm.jpg" width="54" height="54" />
    <span><strong>Test</strong><br />test2&l开发者_如何学JAVAt;img src="/images/arrow.png" width="19" height="17" /></span>
</div>

A much easier approach would be just having the .hover() on that parent <div> like this:

$("div").hover(function() {
    $(this).find("span").slideDown(100);
}, function() {
    $(this).find("span").slideUp(100);
});

Since you effectively only want to affect the <span> when hovering over the <div> (in which only the <img> is initially visible)...it makes more sense to stick your handler there, you see how much simpler the code gets :) I'd just give that <div> some class you can use in a selector (to make it more specific) and you're all set.

Here is an attempt at what you describe

http://www.jsfiddle.net/gaby/cQxVv/

but @Nicks solution is way more elegant.