css - 如何在悬停超链接上设置图像旋转

Question

我的是这样的:

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>

---

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

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

Answer 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>