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中“+=”的应用
Feb 02 Javascript
jquery操作select大全
Apr 25 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
javascript实现简易聊天室
Jul 12 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP制作万年历
2015/01/07 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
幼儿园师德师风学习材料
2014/05/29 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers