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>



  • 相关阅读:
    LeetCode_637.二叉树的层平均值
    LeetCode_627.变更性别
    LeetCode_617.合并二叉树
    LeetCode_595.大的国家
    LeetCode_590.N叉树的后序遍历
    LeetCode_589.N叉树的前序遍历
    LeetCode_58.最后一个单词的长度
    LeetCode_566.重塑矩阵
    LeetCode_561.数组拆分 I
    LeetCode_56.合并区间
  • 原文地址:https://www.cnblogs.com/yingzi/p/2433413.html
Copyright © 2011-2022 走看看