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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
YII框架关联查询操作示例
2019/04/29 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python从入门到精通(DAY 1)
2015/12/20 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
详解Python文件修改的两种方式
2019/08/22 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
留学自荐信
2013/10/10 职场文书
财务会计专业求职信
2014/06/09 职场文书
作息时间调整通知
2015/04/22 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
业余无线电通联Q语
2022/02/18 无线电
vue封装数字翻牌器
2022/04/20 Vue.js