浅谈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 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
jQuery冲突问题解决方法
Jan 19 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+mysql)
2007/11/23 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
对python中return和print的一些理解
2017/08/18 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
python实现事件驱动
2018/11/21 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
教师反邪教心得体会
2016/01/15 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
javascript对象3个属性特征
2021/11/17 Javascript