当前位置:  编程技术>WEB前端

jQuery中多个元素的Hover事件解决方案

    来源: 互联网  发布时间:2014-08-25

    本文导语:  1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: 代码如下: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求。 不过,有些时候我们希望当鼠标进入...

1.需求简介

jQuery的hover事件只是针对单个HTML元素,例如:
代码如下:

$('#login').hover(fun2, fun2);

当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求。

不过,有些时候我们希望当鼠标进入两个或多个元素时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件。例如两个元素紧挨着的HTML元素,如下图:

 

当鼠标进入二者的区域时触发fun1,离开时触发fun2。你也许会想到使用下面的方式
代码如下:

$('#trigger, #drop'),hover(fun1, fun2);

这种方式并不能满足我们的需求,因为从#trigger进入#drop时会触发fun2和fun1。要解决这个问题,一种比较简单的方式是更改HTML结构,实现方式如下:
代码如下:






$('#container').hover(fun1, fun2);

这样通过在父元素上绑定hover事件来实现此功能。

2.示例研究

下图为常见的下拉菜单简化图,HTML结构如下:

 
代码如下:

ul id="#nav">



  • 下拉菜单

    • 下拉项1

    • 下拉项2

    • 下拉项3






  • 实现的JavaScrip程序也是非常简单
    代码如下:

    $('#droplist').hover(function(){
    $(this).find('ul').show();
    }, function(){
    $(this).find('ul').hide();
    });

    这种实现方式逻辑清晰,但导致HTML嵌套层级过多,书写CSS时出现了许多不便。例如:
    代码如下:

    #nav li { font-size:14px; }

    我们希望这段CSS为第一层li元素设置14像素字体,但是其也作用于了第二层元素,所以不得不使用下面的语句改写过来
    代码如下:

    #nav li li { font-size:12px; }

    3.解决方案

    更改HTML结构
    代码如下:




    • 下拉菜单




    • 下拉项1

    • 下拉项2

    • 下拉项3



    依次引入JS文件
    代码如下:




    控制代码
    代码如下:

    $.mixhover(
    '#trigger',
    '#drop',
    function(trg, drop){
    #(drop).show();
    },
    function(trg, drop){
    #(drop).hide();
    }
    )

    这样当鼠标进入#trigger时将#drop显示出来,鼠标从#trigger移如#drop时不会触发任何事件,实际上就是讲#trigger和#drop元素当做一个元素来处理。

    jquery.mixhover.js程序如下
    代码如下:

    /**
    * Author: http://rainman.cnblogs.com/
    * Date: 2014-06-06
    * Depend: jQuery
    */
    $.mixhover = function() {
    // 整理参数 $.mixhover($e1, $e2, handleIn, handleOut)
    var parms;
    var length = arguments.length;
    var handleIn = arguments[length - 2];
    var handleOut = arguments[length - 1];
    if ($.isFunction(handleIn) && $.isFunction(handleOut)) {
    parms = Array.prototype.slice.call(arguments, 0, length - 2);
    } else if ($.isFunction(handleOut)) {
    parms = Array.prototype.slice.call(arguments, 0, length - 1);
    handleIn = arguments[length - 1];
    handleOut = null;
    } else {
    parms = arguments;
    handleIn = null;
    handleOut = null;
    }

    // 整理参数 使得elements依次对应
    var elems = [];
    for (var i = 0, len = parms.length; i < len; i++) {
    elems[i] = [];
    var p = parms[i];
    if (p.constructor === String) {
    p = $(p);
    }
    if (p.constructor === $ || p.constructor === Array) {
    for (var j = 0, size = p.length; j < size; j++) {
    elems[i].push(p[j]);
    }
    } else {
    elems[i].push(p);
    }
    }

    // 绑定Hover事件
    for (var i = 0, len = elems[0].length; i < len; i++) {
    var arr = [];
    for (var j = 0, size = elems.length; j < size; j++) {
    arr.push(elems[j][i]);
    }
    $._mixhover(arr, handleIn, handleOut);
    }
    };
    $._mixhover = function(elems, handleIn, handleOut) {
    var isIn = false, timer;
    $(elems).hover(function() {
    window.clearTimeout(timer);
    if (isIn === false) {
    handleIn && handleIn.apply(elems, elems);
    isIn = true;
    }
    },
    function() {
    timer = window.setTimeout(function() {
    handleOut && handleOut.apply(elems, elems);
    isIn = false;
    }, 10);
    });
    };

        
     
     

    您可能感兴趣的文章:

  • 页面元素绑定jquery toggle后元素隐藏的解决方法
  • jquery判断元素的子元素是否存在的示例代码
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • jquery怎么判断元素的子元素是否存在
  • jquery获取一个元素下面相同子元素的个数代码
  • jquery中子元素和后代元素的区别示例介绍
  • jQuery 滑动方法slideDown向下滑动元素
  • JQuery元素控制方法汇总
  • 使用jquery prev()方法找到同级的前一个元素
  • jQuery each循环获取与搜索元素
  • jquery获取第几个元素方法示例 jquery选择器
  • jQuery如何获取与设置表单元素
  • jquery怎么判断html元素是否存在
  • JQuery实现元素屏幕居中显示的代码
  • jQuery 元素缩放插件 Zoomooz
  • jQuery元素覆盖 Ezoverlay
  • jQuery元素滚动插件 simplyScroll
  • jQuery 追加元素的方法如append、prepend、before
  • jquery控制css元素的display(显示与隐藏)属性
  • jquery控制css display属性(控制元素显示与隐藏)
  • jquery代码-如何使用多个属性来进行过滤
  • 在页面加载完成后通过jquery给多个span赋值
  • jQuery提交多个表单的小例子
  • jQuery元素属性attr设置多个键值的例子
  • jQuery提交多个表单的小技巧
  • 使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
  • jquery重置reset表单内容的多个方法
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 使用jQuery异步加载 JavaScript脚本解决方案
  • JQuery EasyUI 加载两次url的原因分析及解决方案
  • jquery 新建的元素事件绑定问题解决方案
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3