代码描述:JavaScript 鼠标移入移出 切换样式。JavaScript鼠标移入移出切换样式
切换样式的用法非常的广泛,例如当鼠标移动到导航栏或者离开导航栏会出现不同的样式变化。 下面就介绍一下如何利用javascript实现样式的切换效果。代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> body { color: #fff; font: 12px/1.5 Tahoma; } #div1 { width: 150px; height: 150px; margin: 0 auto; padding: 10px; background: black; border: 10px solid #000; cursor: crosshair; } #div1.hover { color: red; background: #f0f0f0; border: 10px solid red; } </style> <script type="text/javascript"> window.onload = function () { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function () { oDiv.className = "hover" }; oDiv.onmouseout = function () { oDiv.className = "" } } </script> </head> <body> <div id="div1">鼠标移入改变样式,鼠标移出恢复。</div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能