У меня есть элемент, к которому я прикрепил анимацию, поэтому я хочу, чтобы анимация вступила в силу после наведения на элемент.Как я могу это сделать? - PullRequest
Новая
       42

У меня есть элемент, к которому я прикрепил анимацию, поэтому я хочу, чтобы анимация вступила в силу после наведения на элемент.Как я могу это сделать?

1 голос
/ 28 сентября 2019 

img{
filter:brightness(20%)
animation-name:f;
animation-duration:5s;
}
@keyframes f{
50%{filter:brightness(150%)
}
<!Doctype html>
<html>
  <body>
    <img src="http://www.sololearn.com/images/tree.jpg">
  <body>
<html>

Я хочу, чтобы эффект анимации вступал в силу при наведении курсора на изображение

1 Ответ

3 голосов
/ 28 сентября 2019

использовать :hover псевдо-класс на img

img{
  filter:brightness(20%);
  animation-duration: 5s;
}

img:hover {
  animation-name: f;
}
  
@keyframes f{
   50%{ filter: brightness(150%); }
}
<img src="http://www.sololearn.com/images/tree.jpg">
...