JQuery, если при наведении курсора

Question

У меня есть img с функцией наведения, чтобы показать элемент. Некоторые из этого нового элемента перекрывают img, поэтому, если я наведу курсор мыши на новый элемент, потому что курсор больше не находится над img, элемент скрывается, а затем мгновенно появляется, потому что курсор снова находится над img. Мне нужно как-то игнорировать команду mouseout, если курсор находится над img, который находится внутри нового элемента (единственная часть нового элемента, которая перекрывает основное изображение).

Это сложно объяснить, но вот код:

JQuery (с битом я не уверен, как это сделать)

$("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<img src="/images/arrow.png" width="19" height="17" /></span>
</div>

Answer 1

Вот попытка того, что вы описываете

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

но решение @Nicks намного элегантнее.

Answer 2

Намного проще было бы просто иметь .hover() на том родительском элементе <div>, например:

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

Поскольку вы фактически хотите воздействовать на <span> только при наведении курсора на <div> (в котором изначально виден только <img>) ... имеет больше смысла вставлять туда свой обработчик, вы видите, сколько проще становится код :) Я бы просто дал этому <div> некоторый класс, который можно использовать в селекторе (чтобы сделать его более конкретным), и все готово.