Как присвоить CSS класс элементу при наведении на него и снять через время?

Question

[Lici]

Наверняка есть красивый способ в пару строк кода присвоить элементу (div блоку, например) какой то класс, когда на него наводится мышь. А через некоторое время - снять эти классы с него. Подскажите, как это сделать.

Сейчас сделал через hover и если убрать мышку раньше окончания анимации, то она до конца не доходит, так не подходит.

Answer 1

[Николай Васильчук]

Ну раз уж вам на чистом CSS накидали примеров, приведу свой на jQuery:

var boxTimer = null,
    $box = $('#box');
$box.hover(
    function() {
        clearTimeout(boxTimer);
        $box.addClass('active');
    },
    function() {
        boxTimer = setTimeout(function() {
            $box.removeClass('active');
        }, 2000);
    }
);

jsfiddle.net/hnBvD

Answer 2

[Lici]

#box {width:200px;height:107px;border:3px solid #E8EFF6;border-radius:8px;background:lightblue;text-align:center;font-size:30px;color:#FFF;margin-top:5px;padding: 5px;
transition: 0s -webkit-animation-duration;
transition: 0s animation-duration;
transition: 0s -webkit-animation-fill-mode;
transition: 0s animation-fill-mode;
transition: 0s -webkit-animation-name;
transition: 0s animation-name;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

#box:hover {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: tada;
animation-name: tada;
transition-delay:1s;
}

Comments

[Lici]

Возможно, я что то не так делаю, но ничего не изменилось относительно этого:

Answer 3

[Lici]

Возможно, я что то не так делаю, но ничего не изменилось относительно этого:

#box {width:200px;height:107px;border:3px solid #E8EFF6;border-radius:8px;background:lightblue;text-align:center;font-size:30px;color:#FFF;margin-top:5px;padding: 5px;}
#baybutton {border-top: 1px solid #FFF;border-bottom: 1px solid #FFF;font-weight: bold;cursor: pointer;}
#baybutton:hover {background: #14C8E9;}
#vnalicii {font-size: 20px;padding-top: 8px;}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

#box:hover {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: tada;
animation-name: tada;
}

Answer 4

[Юрий Лобанов]

Добавлю к варианту @Anonym:
jsfiddle.net/iiil/hnBvD/1
Дело в том, что не совсем понятно из задания, когда должен начаться отсчет времени: при наведении на элемент (как у меня), или после того, как курсор убрали с элемента, как у @Anonym. То есть в моем варианте класс исчезает через 2 секунды после наведения, а в варианте @Anonym через 2 секунды после того, как курсор покидает область элемента.