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阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
js实现微信聊天效果
Aug 09 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python urlopen 使用小示例
2008/09/06 Python
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
开学季活动策划方案
2014/02/28 职场文书
大学生活动总结模板
2014/07/02 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
员工旷工检讨书
2015/08/15 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书