zoukankan      html  css  js  c++  java
  • jQuery的hover()方法(笔记)

    因为mouseover和mouseout经常一起写,所以出现了hover()

    hover(function(){},function(){});第一个参数为鼠标移入运行的函数,第二个为鼠标离开运行的函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    #demo{200px; height:300px;background-color: green;}

    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function() {
    // $("#demo").mouseover(function(){
    // $(this).css({"width":"400px","height":"600px","background-color":"yellow"});
    // });
    // $("#demo").mouseout(function(){
    // $(this).css({"width":"200px","height":"300px","background-color":"green"});
    // });
    $("#demo").hover(function() {
    $(this).css({"width":"400px","height":"600px","background-color":"yellow"});
    }, function() {
    $(this).css({"width":"200px","height":"300px","background-color":"green"});
    });
    });

    //也可以使用简化的hover

    /*一般用这个比较多,鼠标进入离开都执行这个函数。

      $("ul").hover(function(){
      $(".lei").toggle();
      });

    */

    </script>
    </head>
    <body>
    <div id="demo"></div>

    </body>
    </html>

  • 相关阅读:
    查看虚拟机里的Centos7的IP
    display:none visibility:hidden opacity:0区别
    UVA
    Gym
    Gym
    UVALive
    面试题1
    vuex的5个属性值
    vue中的.sync语法糖
    绝对定位实现垂直居中的优缺点
  • 原文地址:https://www.cnblogs.com/SmallNiu/p/4178331.html
Copyright © 2011-2022 走看看