Увеличьте целевую область для jquery hover

Question

На этой странице:

http://thegoodgirlsnyc.com/index.html?page=about

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

Answer 1

Поместите текст в div и дайте ему отступ.Затем поместите событие .hover в элемент div, а не в текст.

Проблема в том, что actullay вызвана .toolTipText.DIV накладывается на половину текста, который находится над ним.Вы можете увидеть это по прикрепленному скриншоту.

Мое решение будет примерно таким:

<div class='hoverable'>
    <span>The text</span>
    <div class='tooltip' style='display:none;'>The tooltip crap</div>
</div>

и используйте такой jQuery, как этот

$(".hoverable").hover(function(){
    $(this).find("div.tooltip").show();
},function(){
    $(this).find("div.tooltip").hide();
});

Затем введите его так, чтобы .tooltipсидит относительно .hoverable div.

Answer 2

Предполагая, что это ваша веб-страница, на которую вы ссылаетесь, я бы не стал добавлять дополнительную разметку, такую ​​как divs , поскольку текст уже содержится в их собственных spans . Просто добавьте отступы к каждому span. Гораздо более семантически, чем добавление дополнительных элементов для стилизации, и вам не нужно менять событие при наведении.

Редактировать: Основная проблема заключается в том, что ваша всплывающая подсказка должна отображаться в центре, а не вправо, как в предыдущих периодах. Это заставляет div всплывающей подсказки обрезать половину текста.

Чтобы исправить это, измените JavaScript для всех О ссылках на команды :

С showToolTip('#lRG', '#dRG', 10, 'center');

до showToolTip('#lRG', '#dRG', 10, 'right');

Это приведет к тому, что всплывающие подсказки появятся в конце имени, а не в середине, и, следовательно, остановит div всплывающей подсказки, разрезая текст пополам.

Answer 3

Это работа для CSS, вам нужно поместить display: block; в элемент, чтобы вы могли добавить width и height.Мой выбор будет добавить padding, поэтому элементы могут иметь разную ширину и высоту.Но сначала нужно отобразить блок.

Answer 4

Вы можете либо увеличить ширину / высоту ваших элементов, либо обернуть их в отдельные элементы с большим размером, а затем установить событие наведения на этих оболочках. Я бы предложил последнее.

Answer 5

У вас может быть некоторая задержка, прежде чем вы увидите всплывающую подсказку или передадите некоторый отступ для якоря, что в основном увеличит область наведения.