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的键盘控制事件说明
Apr 15 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 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
php实现网页缓存的工具类分享
2015/07/14 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
ES10 特性的完整指南小结
2019/03/04 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
Python温度转换实例分析
2018/01/17 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
python最长回文串算法
2018/06/04 Python
Python如何存储数据到json文件
2020/03/09 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
一篇.NET面试题
2014/09/29 面试题
宿舍标语大全
2014/06/19 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
青年文明号申报材料
2014/12/23 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python