Изменить цвет значков css3 при наведении курсора на jquery

0

У меня есть значок ok css3, созданный с помощью 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;}

И у меня небольшая проблема при попытке изменить цвет значка. Он всегда меняет цвет фона, а не значок. Может ли кто-нибудь мне помочь? благодаря

2 ответа

5
Лучший ответ

Использование только CSS:

DEMO

.ok:hover:after, .ok:hover:before {
    background: #33CC33;
}
  • 0
    @TusharGupta Я не понимаю цель твоего редактирования? Что я пропускаю ?!
  • 1
    Я просто добавил подсветку синтаксиса для CSS.
Показать ещё 2 комментария
0

Добавить этот css

.ok.mouseover:after, .ok.mouseover:before{
     background:    #33CC33;
}

и обновите свой JS-код до этого

$('.ok').mouseenter(function(){
    $(this).addClass('mouseover');
});
$('.ok').mouseleave(function(){
    $(this).removeClass('mouseover');
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню