浅谈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 相关文章推荐
JS打开新窗口的2种方式
Apr 18 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
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采集腾讯微博的实现代码
2012/01/19 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
js身份证验证超强脚本
2008/10/26 Javascript
Ext 今日学习总结
2010/09/19 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
python中对list去重的多种方法
2014/09/18 Python
python logging类库使用例子
2014/11/22 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python3下pygame如何实现显示中文
2020/01/11 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
留学自荐信
2013/10/10 职场文书
幼儿教育感言
2014/02/05 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
环卫工作个人总结
2015/03/04 职场文书
中学语文教学反思
2016/02/16 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python