2

Necesito que un div tenga un estilo cuando le pase el cursor encima (hover), y otro estilo cuando le haga un click.

//HTML
<div>texto</div>

//HOVER JS
$('div').hover(function() {
 $(this).css({'background-color':'black', 'color:white'})
}, function () {
 $(this).css({'background-color':'white', 'color:black'})
})

//CLICK JS
$('div').click(function() {
 $(this).css({'background-color:red', 'color:yellow'})
})

Al inicio funciona bien. Cuando paso el cursor sobre el div, el fondo de éste se vuelve negro y las letras blancas; cuando retiro el cursor, el fondo retorna a blanco (o transparente) y las letras a negras. Luego, cuando le doy click al div, el fondo de éste se torna rojo y sus letras amarillas, pero aquí el problema!..

Al momento de retirar el cursor de mi div rojo, el fondo de éste se pinta de blanco y las letras de negro.. Es decir, el hover tiene cola, y su efecto pesa más que el efecto del click.. ¿se entiende? Quisiera que cuando le haga click al div, se quedara en rojo, anulando el efecto anterior del hover. O sea que el hover funcione solo hasta que haga click. Eso quiero.

4 respuestas 4

2

Y por qué no plantearse la idea de realizarse con CSS simple , y desde JQuery solo escuchar el evento click para realizar el cambio deseado en este caso {'background-color':'red', 'color' :' yellow'}. Sería lo más sencillo y menos problemático :)

$('div').click(function() {
	$(this).css({'background-color':'red', 'color' :' yellow'})
});
/* Estilo base de Inicio */
div{
  width: 100px;
  height: 100px;
  border : 1px solid blue;
  background: white;
  color: black;
}
/* Estilo para el Hover */
div:hover{
  background: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>texto</div>

2
  • Igual falla!.. Sabes que pasa? que mi código es más complejo, solo que para no poner mucha cosa acá (que confunda y aburra), he hecho un ejemplo muy sencillo. Pero en mi código verdadero, inicialmente lo hice como dices, el hover desde el css, y el click desde el jquery, y "se cruzó".. se cruzaban las funciones.. Por eso decidí corregir el error desde la raíz (el java script), pero ya llevo horas con este problem y nada :S
    – ann
    Commented el 9 mar. 2018 a las 20:53
  • Se cruzaban las funciones? ¿ Qué funciones ? he ahí el detalle no sé a que funciones se refiere.
    – Dev. Joel
    Commented el 9 mar. 2018 a las 20:57
0

podrías manejar el evento hover desde el css y ya el evento click lo manejas como lo estas haciendo.

<div class="algo">texto</div>

.algo:hover{background-color:black;color: white;}

y ya desde jquery.

$('.algo').click(function() {$(this).css({'background-color':'red', 'color':'white'})})
0

Añadiendo 3 clases de css para cuando está en estado normal, cuando pasas el cursor sobre el y cuando haces click y lo activas.

.active{
  background-color: red; 
  color: yellow;
}
.hover-in{
  background-color: black; 
  color:white;
}
.normal{
  background-color: white;
  color: black;
}

Ahora el comportamiento que reproduce este ejemplo es el mismo que el tuyo pero le añadí que si hacias click nuevamente en un elemento div que tuviera el color rojo volviera a su estado normal, es decir fondo blanco letras en negro

HTML:

<div class="normal">texto</div>

JAVASCRIPT:

$('div').hover(function() {  
 var self = $(this);
 if(self.hasClass('normal'))
    self.removeClass('normal').addClass('hover-in');
}, function () {
    var self = $(this);
    if(self.hasClass('hover-in'))
        self.removeClass('hover-in').addClass('normal');
});

//CLICK JS
$('div').click(function() {
 var self = $(this);
 if(self.hasClass('active')){
   self.removeClass('active').addClass('normal');
 } else { 
    self.removeClass('normal hover-in').addClass('active');
 }
});
2
  • Ya lo hice. Pero fue con mucho más código. Me ayudó eso que pusiste de RemoveClass y otras cosas que leí abajo. Gracias. No sé como funcionar esta aplicación, si te puedo dar puntos y eso?
    – ann
    Commented el 10 mar. 2018 a las 0:41
  • No creo que con 11 puntos puedas votar. Lo importante es que te haya servido para algo Commented el 12 mar. 2018 a las 12:28
0

Si necesitas si o sí realizar todo el proceso mediante JQuery te propongo utilizar el método addClass en vez del método css.

Nota: Si no es totalmente obligatorio utilizar JQuery para todo el proceso, te propongo que revises mi segundo ejemplo.

Principalmente por dos motivos:

  • El método css agrega los estilos de manera inline, por lo que estará sobrescribiendo los estilos que ya tenías. Es por eso por lo que al hacer click y salir del div, como aún tienes el ratón encima, los estilos al salir del hover se aplican y sobrescriben a los que habías asignado al div.

  • Como el método css aplica los estilos inline, estos serán mucho más difíciles de sobreescribir y mantener en caso de que necesites aplicar estilos que entren en conflicto con estos debido a la especificidad.

Al agregar clases y, dotándonos de las propiedades del CSS (Cascade Style Sheets), como los estilos que se aplican son los que tienen una mayor especificidad o, si tienen la misma, los que están más abajo (método en cascada), poniendo la última clase la del click nos quedaría lo siguiente.

$('div').hover(function() {
 $(this).addClass('negro');
}, function () {
 $(this).addClass('blanco');
})

$('div#texto').click(function() {
 $(this).addClass('amarillo');
})
.negro{
  background-color: black;
  color: white;
}

.blanco{
  background-color: white;
  color: black;
}

.amarillo{
  background-color: red;
  color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texto">texto</div>

De todos modos, te propongo utilizar CSS para el efecto del hover y solamente utilizar JQuery para detectar el evento del click. Por supuesto, mucho mejor utilizar el evento addClass, ya que te agregará una clase y no estilos inline, lo que te permitirá un mejor mantenimiento.

$('div').hover(function() {
 $(this).addClass('negro');
}, function () {
 $(this).addClass('blanco');
})

$('div#texto').click(function() {
 $(this).addClass('amarillo');
})
div:hover{
  background-color: black;
  color: white;
}

.amarillo{
  background-color: red;
  color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texto">texto</div>

2
  • Gracias. Ya lo hice.
    – ann
    Commented el 10 mar. 2018 a las 0:42
  • @ann Porfavor, considera marcar la respuesta como aceptada en caso de que te haya servido para solucionar tu problema. Commented el 10 mar. 2018 a las 7:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.