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 相关文章推荐
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
详解如何在JS代码中消灭for循环
Dec 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Django中template for如何使用方法
2021/01/31 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
C语言开发工程师测试题
2016/12/20 面试题
社区优秀志愿者先进事迹
2014/05/09 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
护理专业自荐信范文
2015/03/06 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
清明节随笔
2015/08/15 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
学会Python数据可视化必须尝试这7个库
2021/06/16 Python