CSS - 上懸停做動畫圖像

Question

我的CSS代碼是：

.logo 
{ 
    width: 20px; 
    height: 20px; 
    display: inline-block !important; 
    -webkit-transition: -webkit-transform .8s ease-in-out; 
    -ms-transition: -ms-transform .8s ease-in-out; 
    transition: transform .8s ease-in-out; 
} 

.logo:hover 
{ 
    transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
} 

和HTML是：

<a class="navbar-brand" href="#"> 
    <img src="img/logo200x200.png" class="logo" /> 
    Website 
</a> 

JSFIDDLE

我可以像只有當旋轉不我的鼠標在圖像上，但鼠標在文本上？

Answer 1

使:hover覆蓋整個a標記。在你的例子中像這樣：

.navbar-brand:hover img { 
    ... 
} 

https://jsfiddle.net/abvwh7aj/

Answer 2

只需使用a:hover .logo取代.logo:hover！

這裏工作的解決方案：

.logo { 
 
    width: 20px; 
 
    height: 20px; 
 
    display: inline-block !important; 
 
    -webkit-transition: -webkit-transform .8s ease-in-out; 
 
    -ms-transition: -ms-transform .8s ease-in-out; 
 
    transition: transform .8s ease-in-out; 
 
} 
 
a:hover .logo 
 
{ 
 
    transform:rotate(360deg); 
 
    -ms-transform:rotate(360deg); 
 
    -webkit-transform:rotate(360deg); 
 
}

<a class="navbar-brand" href="#"> 
 
    <img src="http://placehold.it/200x200.png" class="logo" />Website 
 
</a>