浅谈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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
微信小程序checkbox组件使用详解
Jan 31 Javascript
Three.js实现3D机房效果
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
php字符串截取的简单方法
2013/07/04 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
取选中的radio的值
2010/01/11 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
家长会标语
2014/06/24 职场文书
法学专业求职信
2014/07/15 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android