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/

在IE 7中无法正确显示悬停元素

1 个答案: