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 相关文章推荐
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
js 实现Material UI点击涟漪效果示例
Sep 23 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中的string类型使用说明
2010/07/27 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
python2.7实现爬虫网页数据
2018/05/25 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python名片管理系统开发
2020/06/18 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
志愿者服务感言
2014/02/27 职场文书
工地质量标语
2014/06/12 职场文书
庆七一活动总结
2014/08/27 职场文书
2014年村官工作总结
2014/11/24 职场文书
投诉书格式范本
2015/07/02 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
python的html标准库
2022/04/29 Python
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android