浅谈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实现Sleep暂停功能代码
Sep 03 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 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循环输出数据库内容的代码
2008/05/24 PHP
php检测url是否存在的方法
2015/04/14 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
新手入门常用代码集锦
2007/01/11 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python里隐藏的“禅”
2014/06/16 Python
Python 爬虫图片简单实现
2017/06/01 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python实现多层感知器
2019/01/18 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python 读取修改pcap包的例子
2019/07/23 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
web页面录屏实现
2019/02/12 HTML / CSS
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
最新茶叶店创业计划书
2014/01/14 职场文书
公司领导班子对照材料
2014/08/18 职场文书
2014年后勤工作总结
2014/11/18 职场文书
企业年会祝酒词
2015/08/11 职场文书
初中班主任心得体会
2016/01/07 职场文书