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的设计模式
Nov 22 Javascript
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 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之PHP语法学习笔记1
2006/12/17 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python定时执行指定函数的方法
2015/05/27 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python如何将字符串转换为日期
2020/07/31 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
光声世纪笔试题目
2012/08/25 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
关于环保的活动方案
2014/08/25 职场文书
材料员岗位职责
2015/02/10 职场文书
创先争优活动个人总结
2015/03/04 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS