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

以下是一个简单的HTML/CSS代码示例，可以实现鼠标悬停时箭头翻转的效果：

<!DOCTYPE html>
<html>
<head>
	<title>Arrow Flip</title>
	<style type="text/css">
		.arrow {
			display: inline-block;
			width: 20px;
			height: 20px;
			background: url('arrow.png') no-repeat;
			background-size: 100%;
			transition: transform 0.3s ease-in-out;
		}
		.arrow:hover {
			transform: rotate(180deg);
		}
	</style>
</head>
<body>
	<div class="arrow"></div>
</body>
</html>

在上面的代码中，我们首先定义了一个类名为'arrow'的元素，它是一个具有背景图片的块级元素，并且具有CSS3过渡效果。当鼠标悬停在此元素上时，我们使用CSS3旋转变换将箭头翻转了180度。

请注意，上述代码中的箭头.png文件应该替换为您自己的箭头图像。您可以在CSS中使用相对或绝对的路径指定图像文件的位置。