jQuery实现鼠标滑过Div层背景变颜色的方法


Posted in Javascript onFebruary 17, 2015

本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title>

<style type="text/css">

.divbox{ 

  height:300px;

  width:200px;

  background:#ffffff;

  border:solid 1px #ccc;

  float:left;

  margin-right:10px;

 }

.divOver{

 background:#eff8fe;

border:solid 1px #d2dce3;

} 

#zztj{color:#ffffff;}

#zztj a,#zztj a:link,#zztj a:visited,#zztj a:active {color:#ffffff;}

#zztj a:hover {color:#ffffff;}

</style>

<script src="/images/jquery.js"></script>

<script language="javascript">

 $(function(){

  //当鼠标滑入时将div的class换成divOver

  $('.divbox').hover(function(){

    $(this).addClass('divOver');  

   },function(){

    //鼠标离开时移除divOver样式

    $(this).removeClass('divOver'); 

   }

  );

 });

</script>

</head>

<body>

<div id="menu">

    <div class="divbox">区块A</div>

    <div class="divbox">区块B</div>

    <div class="divbox">区块C</div>

</div><br>提示:如果不显示预览效果,请<font color=red>刷新一下本页面</font>,因调用了远程的jquery插件,需要加载完成才能运行。

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 #Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 #Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 #Javascript
js鼠标滑过图片震动特效的方法
Feb 17 #Javascript
js实现双击图片放大单击缩小的方法
Feb 17 #Javascript
js图片模糊切换显示特效的方法
Feb 17 #Javascript
js实现单击图片放大图片的方法
Feb 17 #Javascript
You might like
在字符串中把网址改成超级链接
2006/10/09 PHP
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python tornado使用流生成图片的例子
2019/11/18 Python
python在不同条件下的输入与输出
2020/02/13 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python爬取某平台短视频的方法
2021/02/08 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
电子装配专业毕业生求职信
2014/04/23 职场文书
应届生求职信范文
2014/05/26 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
盲山观后感
2015/06/11 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书