1.5 移出改变样式

中心主题：鼠标移入移出改变样式

一、HTML结构

<div id="div1">
    鼠标移入改变样式，鼠标移出恢复初始样式。
</div>

二、CSS样式

  div{
            width:200px;
            height:200px;
            background-color: lightgoldenrodyellow;
            border:2px solid yellow;
            margin:0px auto;;
        }
        .hover{
            background-color: darkcyan;
            border: 0px;
            color:#ffffff;
        }

三、js

 window.onload=function(){
  /*     var $div=document.getElementById("#div1");//有问题*/
       var $div=document.getElementById("div1");//
       $div.onmouseover=function(){
           $div.className="hover"
       };
       $div.onmouseout=function(){
           $div.className="";
       };
   }

四、jquery

$(document).ready(function(){
       $("div").hover(function(){
           $(this).addClass("hover");
       },function(){
           $(this).removeClass("hover");
       });
    });

五、最终效果

初始样式：

=

 

鼠标移入样式