HTML 鼠标悬停箭头翻转 CSS 代码

.arrow {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #000;
  transition: transform .2s ease-in-out;
}

.arrow:hover {
  transform: rotate(180deg);
}

首先，我们使用 CSS 的 border 属性来创建一个三角形的箭头，其中，border-top 和 border-bottom 都设置为透明，border-right 设置为黑色，并且宽度和高度都为 20px。

然后，我们给箭头设置一个 transform 属性，当鼠标滑过时，通过 rotate 函数将箭头翻转 180 度，从而实现箭头翻转的效果。

注意，我们还给 transform 属性设置了一个过渡效果，使得箭头翻转时能够平滑过渡。