浅谈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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
javascript时间差插件分享
Jul 18 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
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中文本操作的类
2007/03/17 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
python 爬取微信文章
2016/01/30 Python
Pycharm更换python解释器的方法
2018/10/29 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
jupyter 导入csv文件方式
2020/04/21 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
本科生的职业生涯规划范文
2014/01/09 职场文书
教师一帮一活动总结
2014/07/08 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
老龙头导游词
2015/02/11 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
项目合作意向书
2015/05/08 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript