Элемент наведения не отображается правильно в IE 7 - PullRequest
Новая
       9

Элемент наведения не отображается правильно в IE 7

1 голос
/ 15 июля 2011

Я пытаюсь создать ряд изображений и при наведении курсора - отображать дополнительную информацию об элементе, например цену и ссылки на элемент.При наведении на данный момент окно, содержащее дополнительную информацию (желтым цветом), отображается правильно в 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;
        });
    });
   });

Надеюсь, вы поможете мне разобраться в этом.Я знаю, что мне просто не хватает чего-то маленького, но я не могу понять это.Заранее спасибо.

1 Ответ

2 голосов
/ 15 июля 2011

IE7 имеет известные ошибки с z-index, см .: Проблема с Z-индексом IE7 - контекстное меню

В этом конкретном случае один из способов исправить это добавить CSS: 

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

См. В IE7: http://jsfiddle.net/bFZDL/28/

...