onMouseOut часто срабатывает при перемещении внутри тега привязки

У меня есть тег привязки, который имеет событие onMouseOver и onMouseOut. Цель состоит в том, чтобы отобразить всплывающую подсказку. Когда я навожу указатель мыши на тег привязки, событие onMouseOver запускается соответствующим образом и отображается всплывающая подсказка, но также запускается событие onMouseOut, и всплывающая подсказка скрывается. Когда я навожу указатель мыши на якорную ссылку, оба события срабатывают очень часто, по существу, делая всплывающую подсказку видимой и невидимой очень быстро. Я хочу, чтобы onMouseOut срабатывал только тогда, когда я нахожусь за пределами тега привязки.

Код, который я считаю актуальным:

HTML:

<ul>
<li>
<a id="1" href="event.php?1" onmouseover="tooltip(this.offsetWidth, this.offsetHeight, this.childNodes, 1)" onmouseout="tooltipHide(1)">Text</a>
<div class="tt">
<div id="tt2" class="tooltip">
...
</div>
</div>
</li>

<li>
<a id="2" href="event.php?2" onmouseover="tooltip(this.offsetWidth, this.offsetHeight, this.childNodes, 2)" onmouseout="tooltipHide(2)">Text</a>
<div class="tt">
<div id="tt2" class="tooltip">
...
</div>
</div>
</li>
</ul>

Javascript:

function tooltipHide(id) {
tt = document.getElementById("tt"+id);
tt.style.display = "none";
}

function tooltip(oW, oH, e, id) {
...
tt = document.getElementById("tt"+id);
tt.style.display = "block";
...
}

person icekube12jr    schedule 18.08.2011    source источник


Ответы (2)


onmouseover срабатывает каждый раз, когда мышь входит ИЛИ перемещается по объекту, который перекрывается. Вместо этого вы, вероятно, захотите, чтобы onmouseenter отображала всплывающую подсказку. Это срабатывает только тогда, когда мышь пересекает границы элемента внутрь.

person Marc B    schedule 18.08.2011
comment
Спасибо за ответ. Я сделал это (onmouseenter, onmouseleave), и он ответил для IE, но не для Chrome. Тем не менее, это дало аналогичный результат, когда всплывающая подсказка отображается, а затем очень быстро скрывается, когда я перемещаюсь по ссылке. Любые другие предложения? Спасибо. - person icekube12jr; 19.08.2011
comment
Еще одна вещь, которую я только что заметил, заключалась в том, что когда я навожу курсор на ссылку и отображается всплывающая подсказка, если я нажимаю кнопку мыши, всплывающая подсказка исчезает. Если я отпущу, он снова появится. Немного дополнительной информации, если она будет полезна. - person icekube12jr; 19.08.2011

Немного сумасшествие, но проблема заключалась в том, что когда всплывающая подсказка появлялась, она перекрывала текст, вызвавший событие. По какой-то причине это привело к быстрому срабатыванию обеих функций. Я решил проблему, переместив всплывающую подсказку подальше от текста.

person icekube12jr    schedule 19.08.2011