如何修復JQuery幻燈片元素的CSS

我在懸停事件上構建了一個jQuery幻燈片。在頁面底部，我有滑塊元素，當鼠標懸停元素時它將展開。我有一個選項卡，它將伸出元素的頂部以提醒用戶該功能存在。此選項卡導致我很多問題，並且當您將鼠標懸停在選項卡上時，該元素將反覆展開和收縮。我試過編輯CSS，當我刪除了margin-top時它工作正常，但這不是設計的目的。我試圖添加一個DIV來解決這個問題，但是這並沒有奏效。你能幫我讓標籤正常工作嗎？如何修復JQuery幻燈片元素的CSS

我使用JQuery 1.5.1

下面是HTML：

<body> 
    <div class="Livwidget"> 
    <div class="tab"></div> 
    </div> 
</body>

這裏是CSS：

.Livwidget{ 
    background: #000; 
    bottom: 0; 
    left: 0; 
    margin-left: 5%; 
    margin-right: 5%; 
    padding-top: 3px; 
    position: fixed; 
    width: 90%; 
} 


.tab{ 
    background: #000; 
    height: 30px; 
    margin-left: 0; 
    margin-top: -30px; 
    width: 135px; 
}

這裏是JS：

<script> 
    $(document).ready(function(){ 
     $(".Livwidget").hover(makeTall,makeShort); 
    }); // close document.ready 

    function makeTall(){ $(this).animate({"height":250},350);} 
    function makeShort(){ $(this).animate({"height":5},350);} 
</script>

任何幫助真的會很感激iated。我花了幾個小時試圖解決這個問題，似乎無法解決這個問題。

來源

2011-06-09 Ryan Bennett

當你將鼠標懸停在該選項卡，也許「makeTall」是造成你不要徘徊的標籤，引發「makeShort」，這導致你再次懸停？ – FishBasketGordo 2011-06-09 14:12:56