html - CSS过渡变换

Question

请问有没有办法只在鼠标悬停在整个文本上时才旋转图标？

代码如下所示:

.text .icon {
  vertical-align: middle;
  font-size: 40px;
  
  transition: transform 0.5s;
}

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

.text {
  margin: 0 auto;
  clear: both;
  font-size: 23px;
}

<p class="text">
  <span class="icon">i</span><a href="#" target="_blank">Text</a>
</p>

图标会旋转，但只有在鼠标悬停在其自身上时才会旋转。

谢谢

Answer 1

您可以使用 .text:hover .icon 作为选择器，当鼠标悬停在 p 元素上时它会旋转。