JQuery hover запускается несколько раз. Ни одно решение не помогает

Question

У меня есть популярная проблема с JQuery. Hover срабатывает несколько раз, когда я перемещаю мышь в области наведенных элементов. Я перепробовал множество изменений между функциями mouseenter, mouseleave, hover, пытался предотвратить событие и даже функцию stopImmediatePropagation(). Никто не работает. Цель - показать всплывающую подсказку при наведении курсора и скрыть ее, когда мышь уходит.

Мой HTML (С TWIG. Без SVG он все еще не работает.):

<div class="clock info" data-title="04:00 pm!">{% include 'icons/clock.svg.twig' %}</div>

Мой jQuery (некоторый код позиционирования подсказки внутри.):

$('.info').hover(function(e){
    e.stopImmediatePropagation();
    $("#infotitle").css("display", "block");
    var position = $(this).offset();
    $("#infotitle-text").html($(this).data('title'));
    infotitle_h = 18 + $("#infotitle-text").height();
    margin = $("#infotitle-text").width() / 2;
    $("#infotitle").stop(true,true).css("left", position.left - margin);
    $("#infotitle").stop(true,true).css("top", position.top - infotitle_h);
}, function(e){
    e.stopImmediatePropagation();
    $("#infotitle").stop(true,true).css("display", "none");
});

Подсказка html:

<div id="infotitle">
    <div id="infotitle-text">Simple basic title for example.</div>
    <div id="infotitle-triangle"></div>
</div>

Подсказка CSS:

#infotitle
{
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 100;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.2));
    display: none;
}

#infotitle-text
{
    font-size: 14px;
    color: white;
    background-color: fade(@lightblue, 100%);
    text-align: center;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 2px;
    z-index: 100;
}

#infotitle-triangle
{
    display: inline-block;
    position: realtive;
    margin-bottom: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: fade(@lightblue, 100%) transparent transparent transparent;
}

Подсказка, как правило, показывает и скрывает хорошо, но если я перемещаю мышь по области наведенного элемента, она показывает и скрывает несколько раз, когда она должна быть видна все время, когда я это делаю.

Пожалуйста, за помощь и спасибо.

Answer 1

Это из-за div.infortitle Площадь мест на вершине div.info где мышь попадает на вершину div.infortitle эффект наведения заканчивается и снова входит в него.

удалить отступы: 3px на #infortitle-text

удалить поле снизу: 10 пикселей; на #infotitle-triangle

Answer 2

Это действительно плохой способ отображения всплывающей подсказки. Предварительно определите внешний вид всплывающей подсказки, установите для него значение display: none, а затем при наведении курсора addClass, который будет иметь display: block; свойство или.show() с jquery, если необходимо.

Изменение CSS, как вы сделали, очень, очень плохая практика.