JS的DOM之鼠标悬浮事件
鼠标悬浮事件之onmouseover()和onmouseout()事件
这里用大白话介绍一下最简单的原理：
就是当鼠标在这块区域时候会触发相应事件，将鼠标挪开则恢复原先事件
附上代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标悬浮事件onmouseover()和onmouseout()事件</title><style type="text/css">#box{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div id="box"></div><script type="text/javascript">// 1.找开关 2.摁一下 3.灯亮了// 1.找到触发的事件对象 3.事件处理程序var oDiv = document.getElementById("box");// 鼠标划过事件oDiv.onmouseover = function (){// 3.事件处理程序this.style.backgroundColor = "green";}// 鼠标移开事件oDiv.onmouseout = function (){// 3.事件处理程序this.style.backgroundColor = "red";}</script>
</body>
</html>
这个是网页鼠标未悬浮时的样子
这个是鼠标在框内悬浮的样子
