jQuery实现基于鼠标滑动改变按钮背景图片、文字

最新推荐文章于 2024-07-07 23:10:31 发布

weixin_30241919

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量404

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/gaopeng8911/archive/2012/09/12/jQuery%e4%bd%bf%e7%94%a8%e4%b8%ad%e7%9a%84hover%e5%87%bd%e6%95%b0.html

版权

使用jQuery的hover函数实现鼠标滑过按钮背景图片，字体，文字的切换。

hover(over,out)用法:当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 5 <title>无标题文档</title>
 6 <script type="text/javascript" src="jquery-1.8.1.js"></script>
 7 <style type="text/css">
 8 .btFeed{
 9  background-image:url(1.jpg);
10  width:200px;height:100px;
11   }
12 .btFeedhover{
13   background-image:url(2.jpg);
14  width:200px;height:100px;
15  }
16 </style>
17 </head>
18 <script>
19 $(document).ready(function () { 
20 //按钮样式切换 
21 $("#btFeedBack").hover( 
22 function () { 
23 $(this).removeClass("btFeed").addClass("btFeedhover"); 
24 }, 
25 function () { 
26 $(this).removeClass("btFeedhover").addClass("btFeed"); 
27 } 
28 ); 
29 });
30 </script>
31 <body>
32 <div>
33 <input  type="button"  class="btFeed" id="btFeedBack"/>
34 </div>
35 </body>
36 </html>

转载于:https://www.cnblogs.com/gaopeng8911/archive/2012/09/12/jQuery%e4%bd%bf%e7%94%a8%e4%b8%ad%e7%9a%84hover%e5%87%bd%e6%95%b0.html

weixin_30241919

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现基于鼠标滑动改变按钮背景图片、文字

使用jQuery的hover函数实现鼠标滑过按钮背景图片，字体，文字的切换。hover(over,out)用法:当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测。 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition...
复制链接

扫一扫