Что у меня есть это:

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>

Но теперь только изображение вращается, когда я наведите курсор на изображение. Но я хочу, чтобы изображение вращалось при наведении курсора на название ссылки.

Кто-нибудь знает, что я здесь делаю неправильно и как я могу это решить?

0
Christian Hendriks 21 Дек 2019 в 02:17

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>
0
Gerard 20 Дек 2019 в 23:37