изображение исчезает вместо показа в ie7 - PullRequest
Новая
       55

изображение исчезает вместо показа в ie7

4 голосов
/ 06 апреля 2011

Я использую парение CSS и непрозрачность, чтобы сделать одно изображение другим при наведении на него курсора, поместив одно сверху и установив непрозрачность так, чтобы оно исчезало при наведении, а нижнее изображение оставалось.Код выглядит следующим образом: 

#fade {
    overflow:hidden;
    margin:0 auto;


}
#fade img {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    }



#fade img.topfade:hover {
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
    filter:alpha(opacity=.5);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;

}

Это прекрасно работает в ie8, ie9 и firefox, но в ie7 второго изображения нет, когда первое изображение становится невидимым.Кто-нибудь знает, как это исправить?

1 Ответ

1 голос
/ 31 мая 2011

Я сделал демо , которое, кажется, работает для меня в Chrome, Firefox и IE7.

Это работает в IE8 +, так как правило -ms-filter верно, однако непрозрачность в IE7является правилом filter:alpha(opacity=xx), и значение должно быть от 0 до 100 .Ваше текущее значение .5 делает скрытое изображение почти полностью непрозрачным (и я не уверен, что оно даже верно).

quirksmode содержит хорошее резюме различных CSS-правил непрозрачности дляIE.

Примечание: в вашем примере структуры вы пропускаете <ul> или <ol> перед <li>, который я добавил в демо.

...