IE 7でホバー要素が正しく表示されない

Question

画像の行を作成してホバー上に表示しようとしています - 価格やアイテムへのリンクなどの詳細情報を表示します。今すぐカーソルを移動すると、Chrome、Safari、Firefox、およびIE 8に詳細情報を含むボックスが正しく表示されます。ただし、IE 7では、製品の画像（青色の背景）がボックス（黄色）を表示する必要があります。説明が少し難しいので、リンク：http://jsfiddle.net/ryanabennett/bFZDL/27/をチェックしてください。仕上げ製品の外観は次のとおりです。http://www.flickr.com/photos/61208628@N07/5937560243/in/photostream。これはIE 8と9ではうまく動作しますがIE 7ではうまく動作せず、私は何が欠けているのか分からないようです。ここで

は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;*/ 
position:relative; 
} 

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

.livitem:hover{ 
background: yellow; 
} 

.livitem:hover .popupbox { 
position:absolute; 
top:15px; 
left:15px; 
z-index:51; 
} 

.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; 
height: 106px; 
width:230px !important; 
position:absolute; 
top:0; 
left:0; 
} 

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

IE7はz-indexでバグが知られており、以下を参照してくださいIE7で

.productbox:hover { 
    z-index: 9999; /* arbitrary high number */ 
} 

を参照してください：http://jsfiddle.net/bFZDL/28/

IE7 Z-Index issue - Context Menu

を、この特定のインスタンスでは、それを修正するための1つの方法は、このCSSを追加することです