浅谈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 相关文章推荐
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
javascript操作表格排序实例分析
May 06 Javascript
js友好的时间返回函数
Aug 24 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
JavaScript高级程序设计之变量与作用域
Nov 17 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 SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery对象初始化的传参方式
2015/02/26 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
jquery延迟对象解析
2016/10/26 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python复制与引用用法分析
2015/04/08 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
pytorch masked_fill报错的解决
2020/02/18 Python
python爬取天气数据的实例详解
2020/11/20 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
食品营养与检测应届生求职信
2013/11/08 职场文书
好家长事迹材料
2014/01/23 职场文书
技能竞赛活动方案
2014/02/21 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
数学教师个人总结
2015/02/06 职场文书
英文版辞职信
2015/02/28 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
详解Vue的列表渲染
2021/11/20 Vue.js