hover事件包含了两个函数。一个可以看做是mouseover,另一个可以看做是mouseout。 在新浪微博,当指向用户头像,延时加载用户tips名片。新浪微博中鼠标可以很自然的在头像与名片直接切换。 我在做一个功能是,尝试用hover来做,当用户指向头像的时候,延时200响应mouseover事件(如果200毫秒内发生mouseout事件就摧毁mouseover事件),然后ajax请求数据填充到名片里显示出来。这个时候问题就出现了:当我要不鼠标由头像指向名片的时候势必会触发mouseover事件(隐藏名片),而我的需求是把鼠标移到名片上不会触发mouseover事件,移到其他地方时触发mouseover事件,好像没有if(xxx mouseover)这样的判断条件。表述得有点乱,希望有人能看得懂

2011-03-14 23:30:12

2 Answers

你的做法没有问题,就是需要给tips名片也加hover事件。

如果使用timer的方式如下: 

var timer = null;

    $(头像).hover(function(){
        clearTimeout(timer);
        //加载数据并显示tips
        $(tips名片).show();
    },
    function(){ 
        timer = setTimeout(function(){
            $(tips名片).hide();
        },300);
        
    });
    //tips名片hover事件
    $(tips名片).hover(function(){
        clearTimeout(timer);
    },function(){
         timer = setTimeout(function(){
            $(tips名片).hide();
        },300);
    })

或者使用下面方式:

  
$(头像).hover(function(){ //加载数据并显示tips $(tips名片).show(); }, function(e){ //鼠标离开头像,判断是不是移动到 tips名片上,我这里用户id举例判断 if(e.relatedTarget.id != 'tips'){ $(tips名片).hide(); } }); $(tips名片).mouseout(function(e){ //鼠标移离开名片上,判断是否回到了头像上,这里使用 class举例。 if(e.relatedTarget.class != 'avatar'){ $(tips名片).hide(); } });
2011-03-15 01:54:56

要是用setTimeout来控制延迟操作的话,你可以在mouseover和mouseout方法内部首行用clearTimeout(timer)销毁即将触发创建或移除tip的动作. 

//如 var timer; avatar.mouseover(function(){ clearTimeout(timer); //create tip timer = setTimeout(function(){ // }, 500); }) .mouseout(function(){ clearTimeout(timer); //remove tip timer = setTimeout(function(){ // }, 300); })
2011-03-15 03:18:06
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制