我用 css 创建了这个不错的 css3 图标。 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;}
我在尝试更改图标颜色时遇到了一个小问题。它总是改变背景颜色而不是图标。 谁能帮帮我? 谢谢
最佳答案
关于javascript - 使用 jquery 在鼠标悬停时更改 css3 图标颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23065163/