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 for you： 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中另有声明，否则为默认值。

CSS上的CSS3动画：悬停

1 个答案: