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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 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
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
vue实现简单全选和反选功能
2020/09/15 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
连接Python程序与MySQL的教程
2015/04/29 Python
python字符串,数值计算
2016/10/05 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
用python爬取租房网站信息的代码
2018/12/14 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
小学开学寄语
2014/01/19 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
文明寝室申报材料
2014/05/12 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Python sklearn分类决策树方法详解
2022/09/23 Python