浅谈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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
微信小程序实现简单购物车功能
Dec 30 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
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
使用Python对MySQL数据操作
2017/04/06 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python七夕浪漫表白源码
2019/04/05 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
python数据抓取3种方法总结
2021/02/07 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
前台文员个人求职信范文
2014/01/05 职场文书
小学生评语大全
2014/04/18 职场文书
土建施工员岗位职责
2014/07/16 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
师范生见习报告
2014/10/31 职场文书
教师工作表现评语
2014/12/31 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
redis protocol通信协议及使用详解
2022/07/15 Redis