Question

我想问一下，当鼠标悬停在整个文本上时，是否只能旋转图标？

代码如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

谢谢

Answer 1

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

Answer 2

首先，请注意display: inline元素不应该是{{3}}，因此transform属性不适用于它。要使其工作，您可以添加

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

然后，要在.icon悬停时将某些样式设置为.text，您应该使用此选择器：

.text:hover > .icon

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

CSS转换转换

2 个答案: