Question

我有以下情况......

当我将鼠标悬停在 span.share-this 上时，它会触发一个名为“ ”的div进入视图。这个位完全符合我的要求。现在我设置它，当鼠标光标位于' div下的'和鼠标输出时，' div下的'消失了，一切都回来了是（一切都还是花花公子）。

我的问题是，当我将鼠标悬停在 span.share - this 上时，不要导航到' div下的'，而是导航到其他部分页面， div下的'仍然可见。

我想设置它，如果我从 span.share-this 导航到页面的另一部分， div下的'隐藏。

有人知道我应该看什么功能吗？

JQuery代码

$('#slider span.share-this').mouseover(function() { $(this).parents('li').children('div.under').css('bottom', '12px'); }); $('#slider div.under').mouseout(function() { $(this).css('bottom', '52px'); });

HTML代码

<li> <div class="item"> <span class="share-this">Share This</span> </div> <div class="under"> Under </div> </li>

测试网址：http://www.eirestudio.net/share/

Answer 1

你有个好的开始。你只需要添加一些鼠标悬停和鼠标输出。使用悬停可能是最简单的。

$('#slider span.share-this').hover(function()
{   
    $(this).parents('li').children('div.under').css('bottom', '12px');
}, function(){
    $(this).parents('li').children('div.under').css('bottom', '52px');
});

$('#slider div.under').hover(function()
{
    $(this).css('bottom', '12px');
},function()
{
    $(this).css('bottom', '52px');
});

根据您的需求以及页面上的两个元素的空间距离，您可能还需要查看setTimeout和clearTimeout Javascript函数。如果跨度和div足够远，有人可以从span.share-this拖出而不是鼠标悬停在div.under上，你可以设置一个超时，在超过一定的毫秒后会隐藏div.under。然后如果他们超过div.under，你就会清除超时。很快，它可能类似于这样：

function hideUnder(){
   $('#slider div.under').css('bottom', '52px');
}

var under;
$('#slider span.share-this').hover(function()
{   
    clearTimeout(under);
    $(this).parents('li').children('div.under').css('bottom', '12px');
}, function(){
    under = setTimeout(hideUnder, .5*1000);
});

$('#slider div.under').hover(function()
{
    clearTimeout(under);
    $(this).css('bottom', '12px');
},function()
{
    under = setTimeout(hideUnder, .5*1000);
});

当然，这会导致隐藏div.under之前的半秒延迟。

Answer 2

...我认为你需要在共享上调用.mouseout（） - 这个div并隐藏你想藏在那里的东西。或者我错过了一些东西： - （

JQuery - 鼠标悬停问题

2 个答案: