浅谈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代码同步文本框内容的实例方法
Jul 12 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php类中的各种拦截器用法分析
2014/11/03 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
js下弹出窗口的变通
2007/04/18 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
python实例化对象的具体方法
2020/06/17 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
企业员工培训感言
2014/02/26 职场文书
优质服务活动实施方案
2014/05/02 职场文书
后备干部培训方案
2014/05/22 职场文书
2014年实习期工作总结
2014/11/27 职场文书
花田少年史观后感
2015/06/16 职场文书
职位证明模板
2015/06/23 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python