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 空位补零实现代码
Feb 26 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
Jquery Ajax请求代码(2)
2011/01/07 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
大学毕业生简单自荐信
2013/11/05 职场文书
结婚典礼证婚词
2014/01/08 职场文书
阳光体育活动总结
2014/04/30 职场文书
个人欠款担保书
2014/05/20 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
验房委托书
2014/08/30 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
小学优秀教师材料
2014/12/15 职场文书
学生检讨书范文
2015/01/27 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL