1、设计一个div 用于演示:
<head><meta charset="UTF-8"><title>Title</title><style>#myDiv {width: 150px;height: 50px;font-size: 16px;text-align: center;background-color: #eee;}</style>
</head>
<body><div id="myDiv" onmouseover="changeColor()" onmouseout="removeColor()">这是我的盒子!!</div>
</body>
2、脚本中具体函数的实现:
<script>function changeColor(){console.log("移进")document.getElementById("myDiv").style.backgroundColor="red"document.getElementById("myDiv").style.fontSize = '18px';document.getElementById("myDiv").style.color = '#fff'}function removeColor(){console.log("移出")document.getElementById("myDiv").style.backgroundColor="#eee"document.getElementById("myDiv").style.fontSize = '16px';document.getElementById("myDiv").style.color = '#000'}
</script>
3、结果演示:
鼠标在div盒子内:移入
鼠标在div盒子外:移出