我有一个附加动画的元素，所以我希望动画在我悬停在元素上后生效。我怎样才能做到这一点？答案

【问题标题】：I have an element i attached animation to, so i want the animation to take effect after i have hovered on the element. How can i do that?我有一个附加动画的元素，所以我希望动画在我悬停在元素上后生效。我怎样才能做到这一点？
【发布时间】：2020-01-28 13:31:55
【问题描述】：

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>

我希望当我将鼠标悬停在图像上时动画效果生效

【问题讨论】：

标签： css animation hover

【解决方案1】：

在img 上使用:hover 伪类

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

img:hover {
  animation-name: f;
}
  
@keyframes f{
   50%{ filter: brightness(150%); }
}

&lt;img src="http://www.sololearn.com/images/tree.jpg"&gt;

【讨论】：

谢谢 Yousaf，感谢您的回答。