• 三种按钮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>



  • 相关阅读:
    文档翻译第002篇:Process Monitor帮助文档(Part 2)
    Hexo-设置阅读全文
    hexo 添加标签
    防御暴力破解SSH攻击
    Hexo NexT主题添加点击爱心效果
    【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)
    svn命令在linux下的使用
    hexo 配置文件 实例
    Hexo安装配置详解
    markdown编辑
  • 原文地址:https://www.cnblogs.com/yingzi/p/2433413.html
Copyright © 2020-2023  润新知