a:hover 上的 CSS3 动画

Posted 2023-03-05

【中文标题】a:hover 上的 CSS3 动画

【英文标题】：CSS3 animation on a:hover

【发布时间】：2012-11-11 09:29:09

【问题描述】：

我是 CSS 新手，现在面临一个我无法摆脱的问题。 我使用 css3 关键帧制作了动画。每当有人将其悬停时，此动画只会更改图像的旋转。现在我想将此图片链接到网站，但按照我的做法，动画根本无法运行。

<div class="tunein"><a href="http://www.google.com/">
<img src="https://www.google.com/images/srpr/logo3w.png"></a></div>

.tunein    
    position: absolute; 
    top: 40%;
    left: 10%;    
    display: block;
    -webkit-transform:rotate(12deg);
    -moz-transform:rotate(12deg);


.tunein a:hover
    animation: rotate 0.5s ease-out;
    -moz-animation:rotate 0.5s ease-out; 
    -webkit-animation:rotate 0.5s ease-out; 

js 为您服务： http://jsfiddle.net/9jMqc/

当我将类标签添加到 a 元素中时，偏移量会发生巨大变化，但动画会起作用。

【参考方案1】：

我建议将事件移动到 <a> 链接，因此按照 http://jsfiddle.net/9jMqc/2/ 移动它们

.tunein a 
    display: block;
    -webkit-transform:rotate(12deg);
    -moz-transform:rotate(12deg);        


.tunein a:hover
    animation: rotate 0.5s ease-out;
    -moz-animation:rotate 0.5s ease-out; 
    -webkit-animation:rotate 0.5s ease-out; 

我认为您之前可能在<a> 链接上丢失了display: block - 仅供参考，您不需要在<div></div> 上使用display: block，因为这是它们的默认值，除非您的CSS 中另有声明.