浅谈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椭圆旋转相册实现代码
Jan 16 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
纯JS代码实现气泡效果
May 04 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
Vue自定义指令详解
Jul 28 Javascript
js前端导出Excel的方法
Nov 01 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 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的图形函数中显示汉字
2006/10/09 PHP
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
基于Vue单文件组件详解
2017/09/15 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
python实战教程之自动扫雷
2018/07/13 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
explicit和implicit的含义
2012/11/15 面试题
大学生演讲稿范文
2014/01/11 职场文书
银行办理业务介绍信
2014/01/18 职场文书
环保建议书
2014/03/12 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
初中思品教学反思
2016/02/20 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python