jQuery：如果页面加载时鼠标悬停…；

我在处理jQuery问题时遇到了一个棘手的问题。该页面有一个功能图像。当用户将鼠标悬停在功能图像上时，带有一些支持内容的透明覆盖会淡入，如果用户将鼠标移到功能外，则支持栏会淡出。到目前为止还不错，但是

我想让透明覆盖淡入，保持几秒钟，然后在页面加载时淡出（就像一个隐藏的峰值）。很简单，我想。但是，我没有考虑的是，该功能还需要检查，看看鼠标是否已经超过了页面加载时的特征区域。如果是，则在用户未悬停在功能区域之前，支撑条不应淡出（例如，跳过初始自动淡出）。因此：

• 页面加载
• 如果鼠标不在特征区域上，则显示覆盖，等待 几秒钟后，淡出
• 如果鼠标位于特征区域上方，则显示覆盖，不要褪色 直到用户离开该功能 区域
• 初始运行后，用户在覆盖功能上的任何时候 当他们用鼠标擦出 覆盖层逐渐消失

我似乎想不出一个干净的方法来做这件事（我宁愿不去追踪鼠标的坐标）。任何想法都值得赞赏：）

页面如下：

以下是我目前的情况：

$(window).load(function(){  
    $('#content.homepage #support').show().delay(2000).fadeOut(100,function(){
        $('#content.homepage').hover(function(){
            $("#content.homepage #support").delay(500).fadeIn(350);
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });
    });
 });

---

设置一个隐藏

div

的超时，但在用户悬停项目时清除超时，这样它就不会自动消失

var timeout = window.setTimeout(function(){
    $("#content.homepage #support").trigger('mouseout')
},4000);

$('#content.homepage #support').show();


        $('#content.homepage').hover(function(){
            window.clearTimeout(timeout);
            $("#content.homepage #support").fadeIn(350);
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });

---

示例：

设置一个隐藏

div的超时，但在用户悬停项目时清除超时，这样它就不会自动消失

var timeout = window.setTimeout(function(){
    $("#content.homepage #support").trigger('mouseout')
},4000);

$('#content.homepage #support').show();


        $('#content.homepage').hover(function(){
            window.clearTimeout(timeout);
            $("#content.homepage #support").fadeIn(350);
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });

示例：
我认为你应该这样做：

   var hideInitially = true; //This var does the magic
   $(window).load(function(){  
        $('#content.homepage').hover(function(){
            $("#content.homepage #support").delay(500).fadeIn(350);
            hideInitially= false; //If there has been a hover, don't hide on load
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });
    $('#content.homepage #support').show();
    setTimeout(function(){ //Same as delay
       if(hideInitially) $('#content.homepage #support').fadeOut(100);  //Only hide if there wasn't a hover      
    }, 2000);
 });

这段代码的作用是在出现悬停时防止初始隐藏。
希望这有帮助。干杯
我想你应该这样做：

   var hideInitially = true; //This var does the magic
   $(window).load(function(){  
        $('#content.homepage').hover(function(){
            $("#content.homepage #support").delay(500).fadeIn(350);
            hideInitially= false; //If there has been a hover, don't hide on load
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });
    $('#content.homepage #support').show();
    setTimeout(function(){ //Same as delay
       if(hideInitially) $('#content.homepage #support').fadeOut(100);  //Only hide if there wasn't a hover      
    }, 2000);
 });

这段代码的作用是在出现悬停时防止初始隐藏。
希望这有帮助。干杯
问题是，如果您已经掌握了该项目，则不会调用
.mouseenter（）
。但是，
.mousemove（）
确实如此。这不允许您在不移动鼠标的情况下“检测”它们，但如果它们没有移动鼠标，则可以继续隐藏覆盖，并在它们移动时重新显示覆盖

如果您真的想检测到他们开始时将鼠标放在项目顶部而不移动鼠标，您应该能够抓住光标位置并根据项目的屏幕位置进行测试

$('#yourdiv').hover(function() {
    // Show the thing
    // This is the "normal" show it scenario
}, function() {
    // Hide the thing
    // We always want to hide it when they leave
}).mousemove(function() {
    // Show the thing; if this is bound and they move on #yourdiv, you want to show it

    // However, this is only meaningful the first time, so stop tracking mousemove
    $(this).unbind('mousemove');
});

问题是，如果您已经在项目顶部，则不会调用
.mouseenter（）
。但是，
.mousemove（）
确实如此。这不允许您在不移动鼠标的情况下“检测”它们，但如果它们没有移动鼠标，则可以继续隐藏覆盖，并在它们移动时重新显示覆盖

如果您真的想检测到他们开始时将鼠标放在项目顶部而不移动鼠标，您应该能够抓住光标位置并根据项目的屏幕位置进行测试

$('#yourdiv').hover(function() {
    // Show the thing
    // This is the "normal" show it scenario
}, function() {
    // Hide the thing
    // We always want to hide it when they leave
}).mousemove(function() {
    // Show the thing; if this is bound and they move on #yourdiv, you want to show it

    // However, this is only meaningful the first time, so stop tracking mousemove
    $(this).unbind('mousemove');
});