📌  相关文章
📜  html 鼠标悬停事件 - Html (1)

📅  最后修改于: 2023-12-03 15:01:18.155000             🧑  作者: Mango

HTML 鼠标悬停事件 - Html

HTML 鼠标悬停事件，是指当用户鼠标移动到页面上的某个元素上时，触发的事件。在 HTML 中，通过使用鼠标悬停事件，开发者可以在元素上添加交互功能，使页面更加生动。

基本语法
<!DOCTYPE html>
<html>
<head>
	<title>HTML 鼠标悬停事件</title>
</head>
<body>
	<!-- 在元素上绑定鼠标悬停事件 -->
	<p onmouseover="myFunction()">鼠标移动到此处</p>

	<script>
		function myFunction() {
			alert("Hello World!");
		}
	</script>
</body>
</html>
事件属性

HTML 中常用的鼠标悬停事件属性有以下几种。

onmouseover

鼠标移动到元素上方时触发。

<p onmouseover="myFunction()">鼠标移动到此处</p>
onmouseout

鼠标离开元素时触发。

<p onmouseout="myFunction()">鼠标移开此处</p>
onmousemove

鼠标在元素内移动时触发。

<p onmousemove="myFunction()">在此处移动鼠标</p>
JavaScript 函数

通过 JavaScript 函数，可以实现更加复杂的交互效果。

<!DOCTYPE html>
<html>
<head>
	<title>HTML 鼠标悬停事件</title>
</head>
<body>
	<p onmouseover="showHint()" onmouseout="hideHint()">移动鼠标到此处</p>
	<div style="position: absolute; visibility: hidden;" id="hint">提示信息</div>
	<script>
		function showHint() {
			document.getElementById("hint").style.visibility = "visible";
		}
		function hideHint() {
			document.getElementById("hint").style.visibility = "hidden";
		}
	</script>
</body>
</html>

在此例中，当鼠标移动到元素上时，显示一个提示框。当鼠标移开元素时，隐藏该提示框。

总结

鼠标悬停事件为页面添加了交互效果，提升了用户体验。通过绑定事件属性和编写 JavaScript 函数，可以实现更加复杂的交互功能，扩展页面的交互性和可用性。