A small example of changing the CSS style by moving the mouse in and out_javascript skills

A certain area on the web page changes the style when the mouse is moved in, and automatically restores the style when the mouse is moved out. It can be the border of a picture, or a piece of text can change color. Once you master the principle, it seems that you can create a richer and more vivid web page interaction effect. Here It mainly uses Js to control the DIV where the Hover tag is located to generate actions. It is also a good example for learning.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Move the mouse in and out to change the CSS style</title> <style> 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> <div id="div1"> </div>Move the mouse in to change the style, and move the mouse out to restore it.
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]<script> window.onload = function () { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function () { oDiv.className = "hover" }; oDiv.onmouseout = function () { oDiv.className = "" } }; </script>