HTML鼠标悬停箭头翻转代码示例

.arrow {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #333;
  cursor: pointer;
  transition: transform 0.3s ease;
}

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

在这个例子中，我们创建了一个箭头div元素，并使用CSS样式定义了箭头的形状和颜色。我们还为箭头添加了一个指针光标，并使用CSS中的transition属性定义了箭头在鼠标悬停时的翻转动画。当鼠标悬停在箭头上时，我们使用transform属性将箭头旋转180度，从而实现翻转效果。