javascript - Change css3 icons color on mouse over with jquery -


i have ok css3 icon created 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 little issue while trying change color of icon. changes background color not icon. me? thanks

using css:

demo

.ok:hover:after, .ok:hover:before {     background: #33cc33; } 

Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -