zoukankan      html  css  js  c++  java
  • 三种按钮hover的方法

    给按钮加hover,发现有很多种方法,小试三种,测试后发现都OK,留在此地作一个备忘。

    1.直接改变背景图片 
      obj.style.backgroundImage="url(btnSmall.gif)";
    2.改变CSS
      obj.style.cssText= "background:url('btnSmallHover.gif')"; 
    3.jquery的hover
      jquery.hover(function(){},function(){});
    示例代码如下图所示:
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script> <script>
    //改变背景图片
    function m(obj,type)
    {
    switch(type)
    {
    case 'out':
    obj.style.backgroundImage
    ="url(btnSmall.gif)";
    break;
    case 'over':
    obj.style.backgroundImage
    ="url(btnSmallHover.gif)";
    break;
    }
    }
    //改变cssText
    function mCss(obj,type){
    switch(type)
    {
    case 'out':
    obj.style.cssText
    = "background:url('btnSmall.gif')";
    break;
    case 'over':
    obj.style.cssText
    = "background:url('btnSmallHover.gif')";
    break;
    }
    }
    //使用jquery
    $(function(){
    $(
    '#c').hover(
    function(){ $(this).addClass("hover");},
    function(){ $(this).removeClass("hover");}
    );
    })

    </script>

    <style>
    button
    {border:0;width:82;height:40;background: url("btnSmall.gif");}

    .hover
    {background:url( 'btnSmallHover.gif');}
    </style>
    </head>
    <body>
    <button onmouseover="m(this,'over');" onmouseout="m(this,'out');">确定1</button>
    <button onmouseover="mCss(this,'over');" onmouseout="mCss(this,'out');">确定2</button>
    <button id="c">确定3</button>
    </body>
    </html>



  • 相关阅读:
    APK自我保护方法
    Andorid APK反逆向解决方案---梆梆加固原理探寻
    判断android文件是否加壳
    java调用dll-JNA
    Java调用本地接口
    pat00-自测2. 素数对猜想 (20)
    pat00-自测4. Have Fun with Numbers (20)
    pat00-自测3. 数组元素循环右移问题 (20)
    pat00-自测1. 打印沙漏(20)
    pat1013. Battle Over Cities (25)
  • 原文地址:https://www.cnblogs.com/yingzi/p/2433413.html
Copyright © 2011-2022 走看看