如何在悬停超链接上设置图像旋转答案

【问题标题】：How to set a image rotation on hover hyperlink如何在悬停超链接上设置图像旋转
【发布时间】：2020-04-13 09:11:06
【问题描述】：

我拥有的是这样的：

a:link {
    color: #A39B9E;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: #7E7E7E;
    background-color: transparent;
    text-decoration: none;
}
r {
  font-size: 10px;
  color: #7E7E7E;
}
.rotatingimg{transition: transform 2s;}

.rotatingimg:hover{transform:rotate(360deg);}

<table style="height: 20px; width: 100%;">
<tr>
<td style="width: 250px; text-align: left;"><img src="https://www.google.com/s2/favicons?domain=google.com" class="rotatingimg" style="align:right;width:15px;height:15px;border:0"> <a title="Google" href="google.nl" target="_blank">Google.nl</a></td>
</tr>
</table>

但是现在当我将鼠标悬停在图像上时，只有图像在旋转。但我希望当我将鼠标悬停在链接名称上时图像正在旋转。

有谁知道我在这里做错了什么以及如何解决这个问题？

【问题讨论】：

把图片放到链接里
我已经试过了，但是没用
并将鼠标悬停在链接上
你能不能给我发个代码snippert你的意思

标签： css image rotation

【解决方案1】：

在链接中包含图片。

a:link {
  color: #A39B9E;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #7E7E7E;
  background-color: transparent;
  text-decoration: none;
}

r {
  font-size: 10px;
  color: #7E7E7E;
}

.rotatingimg img {
  transition: transform 2s;
}

.rotatingimg:hover img {
  transform: rotate(360deg);
}

<table style="height: 20px; width: 100%;">
  <tr>
    <td style="width: 250px; text-align: left;"> <a class="rotatingimg" title="Google" href="google.nl" target="_blank"><img src="https://www.google.com/s2/favicons?domain=google.com" style="align:right;width:15px;height:15px;border:0">Google.nl</a></td>
  </tr>
</table>

【讨论】：

谢谢，这就是解决方案！谢谢 :)