如何在父元素悬停时使fa图标旋转

在父元素悬停时使fa图标旋转可以通过CSS和JavaScript来实现。下面是一种实现方式：

首先，在HTML中添加一个父元素和一个包含fa图标的子元素。例如：

<div class="parent">
  <i class="fa fa-icon"></i>
</div>

在CSS中，为父元素和子元素添加相应的样式。例如：

.parent {
  position: relative;
  width: 100px;
  height: 100px;
}

.fa-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s ease;
}

在上面的代码中，我们使用了绝对定位将子元素居中，并设置了过渡效果。

使用JavaScript监听父元素的悬停事件，并在事件触发时改变子元素的旋转角度。例如：

const parent = document.querySelector('.parent');
const icon = document.querySelector('.fa-icon');

parent.addEventListener('mouseover', () => {
  icon.style.transform = 'translate(-50%, -50%) rotate(180deg)';
});

parent.addEventListener('mouseout', () => {
  icon.style.transform = 'translate(-50%, -50%) rotate(0deg)';
});

在上面的代码中，我们使用了mouseover和mouseout事件来监听父元素的悬停和离开事件，并通过改变子元素的transform属性来实现旋转效果。

这样，当鼠标悬停在父元素上时，fa图标将会以180度的角度旋转，当鼠标离开时，图标将恢复到原始状态。

推荐的腾讯云相关产品：腾讯云CDN（https://cloud.tencent.com/product/cdn）可以加速网站访问，提高用户体验。