CSS 过渡变换答案

【问题标题】：CSS transition transformCSS 过渡变换
【发布时间】：2015-08-13 15:20:53
【问题描述】：

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

代码如下：

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

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

谢谢

【问题讨论】：

标签： html css transform transition

【解决方案1】：

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

【讨论】：

【解决方案2】：

首先，请注意带有display: inline 的元素不应该是transformable element，因此transform 属性将不适用于它。要使其工作，您可以添加

.text > .icon {
  display: inline-block;
}

然后，当.text 悬停时，要为.icon 设置一些样式，你应该使用这个选择器：

.text:hover > .icon

.text {
  margin: 0 auto;
  font-size: 23px;
}
.text > .icon {
  vertical-align: middle;
  font-size: 40px;
  transition: transform 0.5s;
  display: inline-block;
}
.text:hover > .icon {
  transform: rotate(360deg);
}

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

【讨论】：

萨米首先回答，因为验证码很烦人 :(
是的，但你的更完整……有 10 个。:)