zoukankan      html  css  js  c++  java
  • 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");
           });
        });

    五、最终效果

    初始样式:

    =

    鼠标移入样式

  • 相关阅读:
    Java通过stream将list转换成map
    Java 标记接口
    Java的LinkedList
    Java中的数组
    Java的异常
    初识lambda
    Combining a Collection of Predicates
    重载
    svm资料收集
    向量空间及其他相关数学结构
  • 原文地址:https://www.cnblogs.com/wuliwuli/p/5718425.html
Copyright © 2011-2022 走看看