HTML 箭头鼠标悬停翻转代码示例 - 简单易懂

以下是一个简单的 HTML 和 CSS 代码示例，可以使箭头在鼠标悬停时翻转：

HTML 代码：

<div class='arrow'>
  <span class='arrow-up'></span>
</div>

CSS 代码：

.arrow {
  width: 20px;
  height: 20px;
  position: relative;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.2s ease-in-out;
}

.arrow:hover .arrow-up {
  transform: translateX(-50%) rotate(180deg);
}

在这个示例中，我们使用 CSS 中的 transform 属性来实现翻转，transition 属性来添加动画效果。当鼠标悬停在箭头上时，我们在 :hover 伪类中添加了一个 transform 规则，将箭头旋转 180 度。