Cambiar CSS3 iconos color en el mouse sobre jQuery
-
26-12-2019 - |
Pregunta
Tengo este icono de OK CSS3 creado con CSS. http://jsfiddle.net/5c9n/
js:
$('.ok').mouseenter(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#33CC33');
});
$('.ok').mouseleave(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#ccc');
});
css:
.ok{height:40px; width:40px; display:block; position:relative; margin-left: auto; margin-right: auto;}
.ok:after, .ok:before{content:''; height:32px; width:10px; display:block; background: #ccc; position:absolute; top:6px; left:18px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.ok:before{height:16px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:18px; left:6px;}
Y estoy teniendo un pequeño problema al tratar de cambiar el color del icono.Siempre cambia el color de fondo, no el icono. ¿Alguien podría ayudarme? Gracias
Solución
Otros consejos
Añadir este CSS
.ok.mouseover:after, .ok.mouseover:before{
background: #33CC33;
}
y actualice su código JS a este
$('.ok').mouseenter(function(){
$(this).addClass('mouseover');
});
$('.ok').mouseleave(function(){
$(this).removeClass('mouseover');
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow