JQuery的 - 問題與鼠標懸停

Question

我有以下情形......

當我將鼠標懸停在span.share，這，它觸發一個「下」叫格映入眼簾。這一點完全按照我想要的方式工作。現在我設置它，當鼠標光標位於'下的' div和我mouseout，' div'下的消失，一切都恢復原樣（一切仍然是丹迪）。

我的問題是，當我將鼠標懸停在span.share，這，不要導航到「下」 DIV的，但「下」 DIV導航離開頁面的另一部分，則仍然可見。

我想設置這樣也好，如果我從span.share - 這到頁面的另一部分，則「下」 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並隱藏你想隱藏的東西。還是我錯過了什麼:-(