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

只需将.logo:hover替换为a:hover .logo！

这是工作解决方案：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

css - 在悬停时在图像上做动画

2 个答案: