浅谈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 相关文章推荐
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
jquery实现轮播图特效
Apr 12 jQuery
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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 金额数字转换成英文
2010/05/06 PHP
PHP实现添加购物车功能
2017/03/06 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
React 组件间的通信示例
2018/06/14 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python实现购物车程序
2018/04/16 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
Python和Bash结合在一起的方法
2020/11/13 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
函授自我鉴定范文
2014/02/06 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
2022年四月新番
2022/03/15 日漫