jQuery hover все еще срабатывает
-
19-09-2019 - |
Вопрос
У меня возникла следующая проблема.Я работаю над простой всплывающей подсказкой jQuery, и теперь я имею дело с чем-то странным для меня.Каждый раз, когда я наведу курсор мыши на элемент, запускаются события для наведения курсора мыши и вывода курсора мыши, поэтому всплывающая подсказка исчезает (но если я продолжу перенос, она исчезнет очень много миганий за одну секунду).Вот мой код.
var hint = $('<div id="hint-wrap"><div id="hintbox-top"><div id="hintbox-bottom"><div id="hintbox-topleft"><div id="hintbox-bottomleft"><div id="hint-innerwrap"><div id="hint"></div></div></div></div></div></div></div>'); // Funny I know :-D
hint.hide();
$('body').append( hint ); // I append it
$('.hashint').hover(function(e){
// Set position to cursor's
hint.css( 'left', e.pageX );
hint.css( 'top', e.pageY - 60 );
// animated append
hint.css( 'opacity', 0.2 );
hint.show();
hint.animate( { 'opacity' : 1 }, 100 );
// set text
$( "#hint" , hint).html( $( '#' + $(this).attr( 'id' ) + '-hint' ).html() );
},
function(){ // there is the problem
hint.hide();
});
И HTML - код:
<div id="usernamelabel-hint" class="hinttext">Lorem Ipsum is simply dummy text of the printing and type.Lorem. <a href="#">Sign up!</a></div> <!-- This is hint text (and code) -->
<p><label><span class="hashint" id="usernamelabel">Username</span><span class="asterisk">*</span></label> <!-- ... stuff --> </p>
Пожалуйста, кто-нибудь знает, почему событие mouse out все еще запускает и скрывает мой ящик?
Большое спасибо, Ондрей
Решение
может ли быть так, что ваш tooltip-div накладывается на ваш trigger-div?В этом случае появляющаяся всплывающая подсказка-div запускает mouseleave триггера-div..По крайней мере, это то, что случилось со мной несколько дней назад.Я решил эту проблему, наложив на все невидимый триггер-div - не такой красивый, но сработавший для меня..
Другие советы
Во-первых, почему бы вам просто не поместить HTML для подсказки в HTML-документ?
И в CSS вы просто устанавливаете display:none ?
Затем, показывая подсказку, вы можете просто использовать hint.show
или hint.fadeIn
.
Я бы просто использовал $.mouseenter (указатель мыши) и $.мышеловка.
Пример:
$.('#usernamelabel-hint').mouseenter(function() {
// show or fade inn hint text
});
$.('#usernamelabel-hint').mouseleave(function() {
// Hide or fade out hinttext
});