3

我是 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 元素中时，偏移量发生了巨大变化，但动画有效。

4

1 回答 1

2

我建议将事件移动到<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; 
}

I think you were perhaps missing display: block on the <a> link previously - Just for reference, you shouldn't need to use display: block on <div></div>'s as that's their default unless otherwise declared in your CSS.

于 2012-11-23T00:56:35.673 回答