案例说明:鼠标移动到一片区域,移出和移到会有简单的效果
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的鼠标移动和移出效果案例</title>
<style>
#div1{width:200px;height:200px;display:block;background:green;}
</style>
</head>
<body id="body">
<div id="div1">
区域一
<div>
<script type="text/javascript" src="index.js" ></script>
</body>
</html>
index.js
window.οnlοad=change;
function change(){
var oDiv=document.getElementById("div1");
oDiv.οnmοuseοver=function(){
oDiv.style.width=200px;
oDiv.style.height=300px;
oDiv.style.display="none";
oDiv.style.background="red";
}
<pre name="code" class="javascript">oDiv.οnmοuseοut=function(){
oDiv.style.width=200px;
oDiv.style.height=200px;
oDiv.style.display="block";
oDiv.style.background="green";
}
}