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 前台切换网站的样式实现
Jun 22 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
js select option对象小结
Dec 20 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
JS实现小星星特效
Dec 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
php实现记事本案例
2020/10/20 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JS解密入门之凭直觉解
2008/06/25 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
pycharm远程调试openstack代码
2017/11/21 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
利用python画出折线图
2018/07/26 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
django中forms组件的使用与注意
2019/07/08 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
揠苗助长教学反思
2014/02/04 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript