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 相关文章推荐
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
react的hooks的用法详解
Oct 12 Javascript
浅谈克隆 JavaScript
Nov 02 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php实现记事本案例
2020/10/20 PHP
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python使用struct处理二进制的实例详解
2017/09/11 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python实现感知器算法详解
2017/12/19 Python
python的中异常处理机制
2018/08/30 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
详解django自定义中间件处理
2018/11/21 Python
python实现简单遗传算法
2020/09/18 Python
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
化学系大学生自荐信范文
2014/03/01 职场文书
成语的广告词
2014/03/19 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
股权转让协议范本
2014/12/07 职场文书
募捐感谢信
2015/01/22 职场文书
JS实现简单的九宫格抽奖
2022/06/28 Javascript