jQuery hover bir necha marta yangradi. Hech kim hal qilmaydi

JQuery bilan mashhur muammo bor. Sichqoncha ustida harakatlanadigan element maydonida harakatlanayotganda, hover bir necha marta yonganda. Men sichqoncha, mouseleave, hover funktsiyalari orasida juda ko'p o'zgarishlarni sinab ko'rdim, tadbirni to'xtatishga harakat qildim va hatto stopImmediatePropagation() funktsiyasini ishga tushirdim. Hech kim ishlamayapti. Maqsad, sichqoncha qo'yilganda paneli ko'rsatish va uni yashirishdir.

My html (TWIG bilan svg holda u hali ishlamayapti):

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

Mening jQuery (joylashuvni aniqlashning ba'zi kodlari ichida):

$('.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");
});

Tooltip html:

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

Tooltip 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;
}

To'plam odatda yaxshi ko'rsatiladi va yashiradi, lekin agar sichqonchani sichqoncha elementi maydoniga ko'chirsam, u har doim ko'rinadigan bo'lishi kerakligini ko'rsatib, bir necha marta yashiradi.

Iltimos, yordam va rahmat.

0
jsffidle demo menga yaxshi ishlaydi demo
qo'shib qo'ydi muallif Luminous_Dev, manba
jsffidle demo menga yaxshi ishlaydi demo
qo'shib qo'ydi muallif Luminous_Dev, manba
jsffidle demo menga yaxshi ishlaydi demo
qo'shib qo'ydi muallif Luminous_Dev, manba
Shuningdek, sizda HTML-kodni havola qilish mumkinmi?
qo'shib qo'ydi muallif Luminous_Dev, manba
Shuningdek, sizda HTML-kodni havola qilish mumkinmi?
qo'shib qo'ydi muallif Luminous_Dev, manba
Shuningdek, sizda HTML-kodni havola qilish mumkinmi?
qo'shib qo'ydi muallif Luminous_Dev, manba
$ ('. info') hover (function (e) { bir necha marta chaqirilsinmi?
qo'shib qo'ydi muallif Anthony C, manba
@Luminous_Dev Ha, menimcha, bu kod hozirda nima yaxshi, deb o'ylayman ... Bu shunga o'xshash narsalarga qanday ta'sir qilishi mumkin? Flexbox yoki boshqa CSS bilan bog'langan bo'lishi mumkinmi? Men, albatta, bilmayman.
qo'shib qo'ydi muallif Edenwave, manba
@Luminous_Dev Ha, menimcha, bu kod hozirda nima yaxshi, deb o'ylayman ... Bu shunga o'xshash narsalarga qanday ta'sir qilishi mumkin? Flexbox yoki boshqa CSS bilan bog'langan bo'lishi mumkinmi? Men, albatta, bilmayman.
qo'shib qo'ydi muallif Edenwave, manba
@Luminous_Dev Ha, menimcha, bu kod hozirda nima yaxshi, deb o'ylayman ... Bu shunga o'xshash narsalarga qanday ta'sir qilishi mumkin? Flexbox yoki boshqa CSS bilan bog'langan bo'lishi mumkinmi? Men, albatta, bilmayman.
qo'shib qo'ydi muallif Edenwave, manba
Hozirda ".info" klassi bilan bitta element mavjud. Kelajakda hover ustidagi asboblar panelini ko'rsatmoqchi bo'lgan har bir element ham o'sha sinfga ega bo'ladi.
qo'shib qo'ydi muallif Edenwave, manba
Hozirda ".info" klassi bilan bitta element mavjud. Kelajakda hover ustidagi asboblar panelini ko'rsatmoqchi bo'lgan har bir element ham o'sha sinfga ega bo'ladi.
qo'shib qo'ydi muallif Edenwave, manba
Hozirda ".info" klassi bilan bitta element mavjud. Kelajakda hover ustidagi asboblar panelini ko'rsatmoqchi bo'lgan har bir element ham o'sha sinfga ega bo'ladi.
qo'shib qo'ydi muallif Edenwave, manba

6 javoblar

div.infortitle div.infortitle ustida joylashgan sichqonchani joylashgan div.info ustida joylashgan joy egallaydi. hover effekti tugaydi va qaytadan kiradi.

to'ldirishni olib tashlash: # infortitle-text bo'yicha 3px

margin-bottomni olib tashlash: 10px; # infotitle-uchburchakda

1
qo'shib qo'ydi
Oh, xudoim, albatta Senga rahmat ... Achchiq xato, uni bir daqiqada o'zgartirdim va endi hamma narsa ajoyib ish.
qo'shib qo'ydi muallif Edenwave, manba

div.infortitle div.infortitle ustida joylashgan sichqonchani joylashgan div.info ustida joylashgan joy egallaydi. hover effekti tugaydi va qaytadan kiradi.

to'ldirishni olib tashlash: # infortitle-text bo'yicha 3px

margin-bottomni olib tashlash: 10px; # infotitle-uchburchakda

1
qo'shib qo'ydi
Oh, xudoim, albatta Senga rahmat ... Achchiq xato, uni bir daqiqada o'zgartirdim va endi hamma narsa ajoyib ish.
qo'shib qo'ydi muallif Edenwave, manba

div.infortitle div.infortitle ustida joylashgan sichqonchani joylashgan div.info ustida joylashgan joy egallaydi. hover effekti tugaydi va qaytadan kiradi.

to'ldirishni olib tashlash: # infortitle-text bo'yicha 3px

margin-bottomni olib tashlash: 10px; # infotitle-uchburchakda

1
qo'shib qo'ydi
Oh, xudoim, albatta Senga rahmat ... Achchiq xato, uni bir daqiqada o'zgartirdim va endi hamma narsa ajoyib ish.
qo'shib qo'ydi muallif Edenwave, manba

Bu kabi asboblar panelini ko'rsatish juda yomon yo'ldir. Maslahat vositasi ko'rinishini oldindan belgilab qo'ying, uni ko'rsatish uchun: yo'q, keyin esa displeyga ega addClassni hover ustiga qo'ying: blok; xususiyat yoki .show() ni kerak bo'lsa jQuery bilan.

O'zingiz kabi CSS-ni o'zgartirish, albatta, yomon amaldir.

0
qo'shib qo'ydi
Ishlayotgan/bugged misol bilan skripka qila olasizmi? Nima sodir bo'layotganini ko'rish juda oson bo'ladi, ehtimol sizda oddiy matn terish usuli yoki shunga o'xshash biror narsaga egamiz.
qo'shib qo'ydi muallif b.doe, manba
Buni .hide() va .show() uchun o'zgartirdim, ammo u hali ishlamayapti.
qo'shib qo'ydi muallif Edenwave, manba

Bu kabi asboblar panelini ko'rsatish juda yomon yo'ldir. Maslahat vositasi ko'rinishini oldindan belgilab qo'ying, uni ko'rsatish uchun: yo'q, keyin esa displeyga ega addClassni hover ustiga qo'ying: blok; xususiyat yoki .show() ni kerak bo'lsa jQuery bilan.

O'zingiz kabi CSS-ni o'zgartirish, albatta, yomon amaldir.

0
qo'shib qo'ydi
Ishlayotgan/bugged misol bilan skripka qila olasizmi? Nima sodir bo'layotganini ko'rish juda oson bo'ladi, ehtimol sizda oddiy matn terish usuli yoki shunga o'xshash biror narsaga egamiz.
qo'shib qo'ydi muallif b.doe, manba
Buni .hide() va .show() uchun o'zgartirdim, ammo u hali ishlamayapti.
qo'shib qo'ydi muallif Edenwave, manba

Bu kabi asboblar panelini ko'rsatish juda yomon yo'ldir. Maslahat vositasi ko'rinishini oldindan belgilab qo'ying, uni ko'rsatish uchun: yo'q, keyin esa displeyga ega addClassni hover ustiga qo'ying: blok; xususiyat yoki .show() ni kerak bo'lsa jQuery bilan.

O'zingiz kabi CSS-ni o'zgartirish, albatta, yomon amaldir.

0
qo'shib qo'ydi
Ishlayotgan/bugged misol bilan skripka qila olasizmi? Nima sodir bo'layotganini ko'rish juda oson bo'ladi, ehtimol sizda oddiy matn terish usuli yoki shunga o'xshash biror narsaga egamiz.
qo'shib qo'ydi muallif b.doe, manba
Buni .hide() va .show() uchun o'zgartirdim, ammo u hali ishlamayapti.
qo'shib qo'ydi muallif Edenwave, manba