Change css3 icons color on mouse over with jquery
-
26-12-2019 - |
Question
I have this ok css3 icon created with css. http://jsfiddle.net/5c9gN/
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;}
And I'm having a little issue while trying to change the color of the icon. It always changes the background color not the icon. Could anyone help me? Thanks
Solution
OTHER TIPS
Add this css
.ok.mouseover:after, .ok.mouseover:before{
background: #33CC33;
}
and update your JS code to this
$('.ok').mouseenter(function(){
$(this).addClass('mouseover');
});
$('.ok').mouseleave(function(){
$(this).removeClass('mouseover');
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow