0

我有以下场景......

当我将鼠标悬停在span.share-this上时，它会触发一个名为“ under ”的 div 进入视野。这一点完全按照我想要的方式工作。现在我设置它，当鼠标光标位于“under” div 上并且我鼠标移出时，“under” div 消失，一切都恢复原状（一切都还是花花公子）。

我的问题是，当我将鼠标悬停在span.share-this上并且不导航到“下” div，而是导航到页面的另一部分时，“下” div 仍然可见。

我想这样设置，如果我从span.share-this导航到页面的另一部分，“under” 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/

4

2 回答 2

2

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

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

根据您的需要以及在页面上的空间距离，这两个元素的距离，您可能还需要查看setTimeoutJavascriptclearTimeout函数。如果 span 和 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当然，尽管如此，这会在隐藏之前导致半秒延迟。

于 2010-01-17T04:52:13.233 回答
0

...我认为您需要在 share-this div 上调用 .mouseout() 并隐藏您想要隐藏的内容。或者我错过了什么:-(

于 2010-01-17T04:42:57.320 回答