悬停元素在 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 Z-Index issue - Context Menu

在这个特定的实例中，修复它的一种方法是添加这个 CSS：

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

在 IE7 中查看： http://jsfiddle.net/bFZDL/28/