html - 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/