浅谈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 距离某一时间点时间是多少实现代码
Oct 14 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
JS中min函数实例讲解
Feb 18 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
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP常用的小程序代码段
2015/11/14 PHP
smarty自定义函数用法示例
2016/05/20 PHP
ext实现完整的登录代码
2008/08/08 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
Vue计算属性的使用
2017/08/04 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
django如何自己创建一个中间件
2019/07/24 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python 实现性别识别
2020/11/21 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Araks官网:纽约内衣品牌
2020/10/15 全球购物
财务部经理岗位职责
2014/02/03 职场文书
安全生产先进个人总结
2015/02/15 职场文书
中学图书馆工作总结
2015/08/11 职场文书
高中数学教学反思范文
2016/02/18 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
Python如何用re模块实现简易tokenizer
2022/05/02 Python