Как сделать, если не условный тест с JQuery?

Question

У меня есть тег, который появляется на изображении, когда мышь вводит изображение. Когда я хочу перейти по ссылке с помощью мыши, ссылка логически исчезает, потому что я использовал функцию .mouseleave(), чтобы скрыть ссылку, когда мышь покидает изображение.

Я подумал сделать условный тест для .mouseleave() следующим образом:

if(!$("#linkId").mouseenter()){
//...
}

Я пытался использовать . not (). Mousenter () вместо ! not

Но это не работает .. Когда я захожу по ссылке, она остается и никогда не уходит ...

Спасибо

Sam

Answer 1

Поместите и ссылку, и изображение в контейнер и назначьте вместо него обработчик событий.Вы можете расположить ссылку с помощью CSS.

Поскольку ссылка и изображение являются дочерними элементами родительского объекта, событие mouseleave не вызывается при наведении на ссылку.

Пример:

HTML:

<div id="parent">
    <div id="image"></div> <!-- the div is just an example -->
    <a id="link" href="#">Some link</a>
</div>

CSS:

#parent {
    position: relative;
}

/* used div for demo only */
#image {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

#link {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

JavaScript:

$('#parent').hover(function() {
    $('#link').toggle();
});

ДЕМО

---

$("#linkId").mouseenter() не делает то, что вы думаете, он делает.Он не проверяет, находится ли мышь над ссылкой или нет, он генерирует событие mouseenter для ссылки.

Answer 2

Используйте hover() и либо привяжите его к ссылке и изображению, либо добавьте изображение в элемент ссылки.

т.е.

<img src="example.gif" alt="" id="showme" style="display:none" />
<a href="#" id="hoverme">Hover me</a>

<script type="text/javascript">
    $('#hoverme,#showme').hover(function(){
        $('#showme').toggle();
    });
</script>