Question

我在处理jQuery问题时遇到了棘手的问题。该页面有一个特征图像。当用户在特征图像上悬停时，具有一些支持内容的透明覆盖会淡入，并且如果他们将鼠标移动到特征外部，则支撑条会淡出。到目前为止一切都那么好，但是......

我希望透明覆盖层淡入，持续几秒钟，然后在页面加载时淡出（如潜行峰值）。我想，很简单。但是，我没有考虑的是该功能还需要在加载页面时检查鼠标是否已经在功能区域上方。如果是，则在用户没有悬停在特征区域上之前，支撑条不应淡出（例如，跳过初始自动淡出）。所以：

页面加载
如果鼠标未在功能区域上方，请显示叠加层，等待几秒钟，淡出它
如果鼠标位于要素区域上方，请显示叠加层，请勿淡化直到用户离开该功能区域
初次运行后，只要用户在功能上覆盖，就可以当他们将鼠标移出时，它会消失叠加淡出

我似乎无法找到一个干净的方法来做到这一点（我宁愿不必跟踪鼠标坐标）。任何想法赞赏:)

以下是页面：http://collective.poccuo.com/

这就是我现在所拥有的：

$(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);
        });
    });
 });

Answer 1

设置超时隐藏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);
        });

示例：http://jsfiddle.net/niklasvh/4sejb/

Answer 2

我认为你应该这样做：

   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);
 });

此代码的作用是防止在悬停时初始隐藏。希望这可以帮助。干杯

Answer 3

问题是如果你已经在项目的顶部，.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');
});

jQuery：如果鼠标悬停在页面加载时......

3 个答案: