Vyberte si rodičovské prvky a všetky deti počas prechodu myšou, jQuery - jquery, pohybovať sa, prepínať, voliť, viazať

Mám vnútri div s prvkami (h3, img, p). Chcem pomocou jQuery zistiť, kedy sa užívateľ vznáša nad týmto divom, aby potom prepínal triedu prvku v tomto div.

Používam kód uvedený nižšie:

$(".entry").bind({
mouseover: function() {
$(".readMore").toggleClass("inverted");
},
mouseleave: function() {
$(".readMore").toggleClass("inverted");
}
});

To funguje podľa očakávania, keď sa vznášate nad iba nad div. Ak umiestnite kurzor myši na prvok vo vnútri prvku div (napr. .entry h2) prepne triedu, akoby opustil rodičovský div (.entry), ale je to v skutočnosti. Prvky vo vnútri neplávajú div.entry o ktorom som si myslel, že by to mohol zahodiť. skúsil som $(".entry *") a $(".entry, .entry *") ale obaja majú podobné problémy.

Nejaké nápady?

odpovede:

Skúste použiť mouseenter a mouseleave miesto.

Tu je príslušná dokumentácia o mouseenter proti mouseover:

Udalosť mouseenter sa líši od myši vspôsobom, akým to narába bublanie udalosti. Ak sa v tomto príklade použil ukazovateľ myši, potom keď ukazovateľ myši presunutý nad vnútorný prvok, obslužná rutina by bola spustený. Toto je zvyčajne nežiaduce správanie. Udalosť mouseenter, na druhej strane spustí svoju obslužnú rutinu iba vtedy, keď myš vstúpi do prvok, na ktorý je viazaný, nie potomok.

Tu je príklad to by mohlo pomôcť; všimnite si, aké udalosti sa vypália, keď pohybujete kurzorom v prvkoch a mimo nich.