Tengo un div con elementos (h3, img, p) dentro. Quiero usar jQuery para detectar cuándo un usuario se desplaza sobre este div para luego alternar una clase de un elemento en este div.
Estoy usando el siguiente código:
$(".entry").bind({
mouseover: function() {
$(".readMore").toggleClass("inverted");
},
mouseleave: function() {
$(".readMore").toggleClass("inverted");
}
});
Esto funciona como se esperaba cuando se pasa el cursor sobre solo el div. Si usted se desplaza sobre un elemento dentro del div (por ejemplo, .entry h2) desactiva la clase como si hubiera dejado el div principal (.entry) pero en realidad está dentro. Los elementos no están flotando dentro div.entry Lo que pensé que podría tirarlo. Lo intenté $(".entry *") y $(".entry, .entry *") pero ambos tienen problemas similares.
¿Alguna idea?
Respuestas
13 para la respuesta № 1Intenta usar mouseenter y mouseleave en lugar.
Aquí está la documentación relevante sobre mouseenter vs mouseover:
El evento mouseenter se diferencia del mouseover enla forma en que maneja evento burbujeante. Si se utilizó mouseover en este ejemplo, entonces cuando el el puntero del mouse se movió sobre el elemento interno, el controlador sería activado Esto suele ser un comportamiento indeseable. El evento mouseenter, por otro lado, solo activa su controlador cuando el mouse ingresa al elemento al que está vinculado, no un descendiente.
Aquí hay un ejemplo que podria ayudar observe qué eventos se activan cuando mueve el puntero dentro y fuera de los elementos.