jQuery로 마우스로 CSS3 아이콘을 변경하십시오
-
26-12-2019 - |
문제
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;}
.
아이콘의 색상을 변경하려고하는 동안 약간의 문제가 발생합니다.아이콘이 아닌 항상 배경색을 변경합니다. 누구도 나를 도울 수 있나요? 감사합니다
해결책
다른 팁
이 CSS를 추가
.ok.mouseover:after, .ok.mouseover:before{
background: #33CC33;
}
.
및 JS 코드를이
로 업데이트하십시오.$('.ok').mouseenter(function(){
$(this).addClass('mouseover');
});
$('.ok').mouseleave(function(){
$(this).removeClass('mouseover');
});
. 제휴하지 않습니다 StackOverflow