如何顯示上懸停jQuery函數沒有正確滑動

Question

我想創建的圖像和懸停行的下一個元素 - 顯示有關項目的，如價格和鏈接到該項目的更多信息。現在懸停時，包含更多信息（黃色）的框將顯示在項目下方，我希望它顯示爲一個元素，其中右側的信息和左側的項目圖片。我也不希望它滑動下一個項目，但在下一個項目頂部顯示黃色的信息框。這很難解釋，所以看看基本代碼：http://jsfiddle.net/ryanabennett/bFZDL/1/

正如你可能從這個問題可以告訴我，我很新的編碼，並嘗試過不同的位置元素，但似乎沒有任何工作。希望你能幫助。

這裏是我的HTML：

<div class="productbox"> 
<div class="livitem"> 
    <div class="Livwidgetexpandimg"> 
    <a href="#"><img src="#" class="popupbox" /></a> 
    <div class="popup"></div> 
    </div> 
    </div> 
</div> 
<div class="productbox"> 
    <div class="livitem"> 
    <div class="Livwidgetexpandimg"> 
     <a href="#"><img src="#" class="popupbox" /></a> 
    <div class="popup"></div> 
    </div> 
    </div> 
</div> 

這裏是我的CSS：

.productbox{ 
float: left; 
height: 150px; 
margin-left: 5px; 
overflow: hidden; 
} 

.livitem{ 
float: left; 
position: relative; 
top: 3px; 
} 

.livitem:hover{ 
background: yellow; 
} 

.Livwidgetexpandimg{ 
background: blue; 
height: 75px; 
margin-left: 10px; 
margin-top: 10px; 
margin-right: 10px; 
padding: 5px; 
width: 75px; 
float: left; 
} 

.popupbox{ 
border: medium none; 
height: 75px; 
width: 75px; 
} 

.popup{ 
background: yellow; 
display: none; 
float: left; 
height: 122px; 
margin-left: -10px; 
opacity: 0; 
width: 175px; 
z-index: 50; 
} 

這裏是我的JQuery：

$(function() { 
    $('.livitem').each(function() { 
     var distance = 10; 
     var time = 200; 
     var hideDelay = 1; 

     var hideDelayTimer = null; 

     var beingShown = false; 
     var shown = false; 
     var trigger = $('.Livwidgetexpandimg', this); 
     var info = $('.popup', this).css('opacity', 0); 


     $([trigger.get(0), info.get(0)]).mouseover(function() { 
      if (hideDelayTimer) clearTimeout(hideDelayTimer); 
      if (beingShown || shown) { 
       // don't trigger the animation again 
       return; 
      } else { 
       // reset position of info box 
       beingShown = true; 

       info.css({ 
        top: 10, 
        left: -3, 
        display: 'block' 
       }).animate({ 
        top: '-=' + distance + 'px', 
        opacity: 1 
       }, time, 'swing', function() { 
        beingShown = false; 
        shown = true; 
       }); 
      } 

      return false; 
     }).mouseout(function() { 
      if (hideDelayTimer) clearTimeout(hideDelayTimer); 
      hideDelayTimer = setTimeout(function() { 
       hideDelayTimer = null; 
       info.animate({ 
        top: '-=' + distance + 'px', 
        opacity: 0 
       }, time, 'swing', function() { 
        shown = false; 
        info.css('display', 'none'); 
       }); 

      }, hideDelay); 

      return false; 
     }); 
    }); 
    }); 

希望你將能夠幫助我.. 。

Answer 1

想到這就是你羅歐凱爲：http://jsfiddle.net/vCbMt/1/

我比較這與目前的代碼，看到的變化，我懷疑更可能被剝離，以使其更好地工作。基本上你需要一些絕對的定位和巧妙的Z指數工作。

該實施例僅在瀏覽器進行測試。這是高度可能會需要一些額外的CSS來獲得z-index在IE中工作。這是IE中的一個基本問題，這裏和其他地方的許多主題都涉及修復（提示：使用相對位置建立棧）

我希望這有助於！