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

以下是一个简单的 HTML 鼠标划动箭头翻转代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>HTML 鼠标划动箭头翻转示例</title>
	<style>
		.arrow {
			display: inline-block;
			width: 20px;
			height: 20px;
			border: solid black;
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
			transition: transform 0.2s;
			cursor: pointer;
		}
		.arrow:hover {
			transform: rotate(-135deg);
		}
	</style>
</head>
<body>
	<div class='arrow'></div>
</body>
</html>

在上面的示例中，我们使用 CSS 的 'transform' 属性来旋转箭头，使用 'transition' 属性来实现平滑过渡效果。当鼠标悬停在箭头上时，我们使用 ':hover' 伪类来反转箭头的旋转方向，从而实现翻转的效果。