浅谈jQuery hover(over, out)事件函数


Posted in Javascript onDecember 03, 2016

hover(over, out)事件函数

当鼠标移动一个匹配的元素上面,会触发指定的第一个函数

当鼠标移出这个元素时,会触发指定的第二个函数

over(function):鼠标移到元素上触发的函数

out(function):鼠标移出元素触发的函数

<nav class="main-nav"> 
  <a href="/"><span>首页</span></a> 
  <a href="/about"><span>关于考试</span></a> 
  <a href="/exam"><span>报考指南</span></a> 
  <a href="/news"><span>考试情报</span></a> 
  <a href="/career"><span>考试与就业</span></a> 
  <a class="omega" href="/sitemap"><span>网站地图</span></a> 
</nav> 
<script> 
$(function(){
//鼠标移到与移出,移到元素时,添加当前元素样式,并且去掉当前页面的样式。鼠标移出时,去掉当前元素的样式,并且添加当前页面的样式 
  $('.main-nav').find('a').hover( 
    function(){$(this).addClass('cur');$('.main-nav').find('a[href="<?php echo "/".$path[1];?>"]').removeClass('cur');}, 
    function(){$(this).removeClass('cur');$('.main-nav').find('a[href="<?php echo "/".$path[1];?>"]').addClass('cur');} 
  ); 
  $('.main-nav').find('a[href="<?php echo "/".$path[1];?>"]').addClass('cur'); //加载页面时就添加样式 
}); 
</script>

获取<a href="/"></a>这个元素

$(".main-nav").find('a[href="/"]');

以上这篇浅谈jQuery hover(over, out)事件函数就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
基于vue实现分页效果
Nov 06 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
js实现随机点名器精简版
Jun 29 Javascript
js实现碰撞检测
Jan 29 Javascript
jquery 多个radio的click事件实例
Dec 03 #Javascript
jquery点击展示与隐藏更多内容
Dec 03 #Javascript
Javascript 实现放大镜效果实例详解
Dec 03 #Javascript
bootstrap模态框垂直居中效果
Dec 03 #Javascript
JS制作类似选项卡切换的年历
Dec 03 #Javascript
JS键盘版计算器的制作方法
Dec 03 #Javascript
js实现右键自定义菜单
Dec 03 #Javascript
You might like
php中处理模拟rewrite 效果
2006/12/09 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
php模板引擎技术简单实现
2016/03/15 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python实现复制整个目录的方法
2015/05/12 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python装饰器用法示例小结
2018/02/11 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python实现视频压缩功能
2020/12/18 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
垃圾回收的优点和原理
2014/05/16 面试题
优秀教师主要事迹
2014/02/01 职场文书
销售内勤岗位职责
2014/04/15 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL