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>



  • 相关阅读:
    hiveserver2 with kerberos authentication
    python Basic usage
    python Quicksort demo
    Python HeapSort
    mrunit for wordcount demo
    CCDH证书
    Hadoop question list
    Hadoop Yarn core concepts
    Hadoop Resource
    Hadoop could not find or load main class
  • 原文地址:https://www.cnblogs.com/yingzi/p/2433413.html
Copyright © 2011-2022 走看看