三种按钮hover的方法

按钮hover效果实现

最新推荐文章于 2024-08-08 09:00:00 发布

weixin_30549175

最新推荐文章于 2024-08-08 09:00:00 发布

阅读量299

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yingzi/archive/2012/04/05/2433413.html

本文介绍三种实现按钮hover效果的方法：直接更改背景图片、修改CSS样式和利用jQuery 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>