1

画像の行を作成しようとしていて、ホバーすると、価格やアイテムへのリンクなど、アイテムに関する詳細情報が表示されます。ホバーすると、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;
}

Jクエリは次のとおりです。

$(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;
        });
    });
   });

うまくいけば、これを理解するのを手伝ってくれます。何か小さなものが欠けていることはわかっていますが、それを理解できないようです。前もって感謝します。

4

1 に答える 1

2

IE7 には既知のバグがz-indexあります。IE7 の Z-Index の問題 - コンテキスト メニューを参照してください。

この特定の例では、これを修正する 1 つの方法は、次の CSS を追加することです。

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

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

于 2011-07-15T19:06:16.677 に答える