:hover 上的 CSS3 动画

Question

我是 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 fiddle 给你: http://jsfiddle.net/9jMqc/

当我将类标签添加到 a 元素中时，偏移量发生显着变化，但动画有效。

Answer 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; 
}

我想你可能错过了 display: block在 <a> 上之前的链接 - 仅供引用，您不需要使用 display: block在 <div></div>除非在您的 CSS 中另有声明，否则这是它们的默认值。