Saltar al contenido

¿Cómo definir el estado css: hover en un selector de jQuery?

Solución:

Sugeriría usar CSS sobre jquery (si es posible); de lo contrario, puede usar algo como esto

$("div.myclass").hover(function() {
  $(this).css("background-color","red")
});

Puede cambiar su selector según sus necesidades.

Como comentó @ A.Wolff, si desea usar este efecto de desplazamiento en varias clases, puede usarlo así

$(".myclass, .myclass2").hover(function(e) { 
    $(this).css("background-color",e.type === "mouseenter"?"red":"transparent") 
})

Demostración de Js Fiddle

Puedes probar esto:

$(".myclass").mouseover(function() {
    $(this).find(" > div").css("background-color","red");
}).mouseout(function() {
    $(this).find(" > div").css("background-color","transparent");
});

MANIFESTACIÓN

Sé que esto tiene una respuesta aceptada, pero si alguien se encuentra con esto, mi solución puede ayudar.

Encontré esta pregunta porque tengo un caso de uso en el que quería desactivar el estado: hover para los elementos individualmente. Dado que no hay forma de hacer esto en el DOM, otra buena forma de hacerlo es definir una clase en CSS que anule el estado de desplazamiento.

Por ejemplo, el css:

.nohover:hover {
    color: black !important;
}

Luego con jQuery:

$("#elm").addClass("nohover");

Con este método, puede anular tantos elementos DOM como desee sin vincular toneladas de eventos onHover.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *