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>



  • 相关阅读:
    CSS浮动(float、clear)通俗讲解
    JAVA 类的加载
    数据库操作 delete和truncate的区别
    正则表达式 匹配相同数字
    Oracle EBS OM 取消订单
    Oracle EBS OM 取消订单行
    Oracle EBS OM 已存在的OM订单增加物料
    Oracle EBS OM 创建订单
    Oracle EBS INV 创建物料搬运单头
    Oracle EBS INV 创建物料搬运单
  • 原文地址:https://www.cnblogs.com/yingzi/p/2433413.html
Copyright © 2011-2022 走看看