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来定位
Feb 20 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
详解JS浏览器事件循环机制
Mar 27 Javascript
简单了解JavaScript异步
May 23 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
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 不使用js实现页面跳转
2014/02/11 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
详解webpack 如何集成第三方js库
2017/06/29 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python使用递归的方式建立二叉树
2019/07/03 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python中six模块基础用法
2019/12/08 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
快餐店的创业计划书范文
2014/01/29 职场文书
元旦晚会邀请函
2014/02/01 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书