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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
详解Document.Cookie
Dec 25 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
vue实现lodop打印功能的示例
Nov 11 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无限遍历目录示例
2014/02/21 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
python数据结构之列表和元组的详解
2017/09/23 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
python简单验证码识别的实现方法
2019/05/10 Python
python简单区块链模拟详解
2019/07/03 Python
python多线程实现TCP服务端
2019/09/03 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
国际贸易毕业生求职信
2014/07/20 职场文书
效能风暴心得体会
2014/09/04 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
活着观后感
2015/06/03 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers