浅谈jQuery hover(over, out)事件函数

 更新时间:2016年12月03日 15:54:30   投稿:jingxian  
下面小编就为大家带来一篇浅谈jQuery hover(over, out)事件函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦

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)事件函数就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于jquery实现的可编辑下拉框实现代码

    基于jquery实现的可编辑下拉框实现代码

    昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件;在网上查了很多,没有找到合适自己的,所以决定自动制作一个
    2014-08-08
  • jquery $.ajax各个事件执行顺序

    jquery $.ajax各个事件执行顺序

    jquery中各个事件执行顺序如下,使用jquery $.ajax的朋友可以参考下。
    2010-10-10
  • jQuery实现的超酷苹果风格图标滑出菜单效果代码

    jQuery实现的超酷苹果风格图标滑出菜单效果代码

    这篇文章主要介绍了jQuery实现的超酷苹果风格图标滑出菜单效果代码,涉及jQuery基于鼠标hover事件动态操作页面元素属性的相关技巧,非常美观实用,需要的朋友可以参考下
    2015-09-09
  • jquery 图片上传按比例预览插件集合

    jquery 图片上传按比例预览插件集合

    上传的时候可以生成固定宽高范围内的等比例缩放图的代码,需要的朋友可以参考下。
    2011-05-05
  • jQuery实现两个select控件的互移操作

    jQuery实现两个select控件的互移操作

    本文主要介绍了利用jQuery实现两个<select>控件的互移操作的方法代码,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • jQuery随手笔记之常用的jQuery操作DOM事件

    jQuery随手笔记之常用的jQuery操作DOM事件

    Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,本文给大家介绍jQuery随手笔记之常用的jQuery操作DOM事件,需要的朋友参考下
    2015-11-11
  • jQuery插件slider实现拖动滑块选取价格范围

    jQuery插件slider实现拖动滑块选取价格范围

    jquery滑块(slider)允许用户从一个有限的范围内选择一个数值。当沿着轨道移动滑块控件时,将显示一个表示当前值的提示框,用户可通过设置它的属性来自定义滑块。
    2015-04-04
  • jQuery实现带有上下控制按钮的简单多行滚屏效果代码

    jQuery实现带有上下控制按钮的简单多行滚屏效果代码

    这篇文章主要介绍了jQuery实现带有上下控制按钮的简单多行滚屏效果代码,涉及jquery鼠标事件控制页面翻页滚动效果的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jquery插件ContextMenu设置右键菜单

    jquery插件ContextMenu设置右键菜单

    这篇文章主要介绍了jquery插件ContextMenu设置右键菜单的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • jquery插件star-rating.js实现星级评分特效

    jquery插件star-rating.js实现星级评分特效

    Bootstrap Star Rating是一个简单而强大的jQuery插件实现星级分数评级。支持像分数星填充和RTL输入先进的功能。在利用纯CSS-3造型使控制重点开发。该插件使用引导标记和造型默认情况下,但它可以覆盖与其他任何CSS的标记。
    2015-04-04

最新评论