Блог

Главная - Вопросы по программированию - изображение исчезает вместо отображения в ie7

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

#css #internet-explorer-7 #hover #opacity

#css #internet-explorer-7 #наведите курсор #непрозрачность

Вопрос:

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

 #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. мой ответ не был хорошим, поэтому я удалил его. Я пытался работать с вашим CSS в jsfiddle — см. jsfiddle.net/8HLdx — но, я думаю, мне также нужно было увидеть ваш HTML-код. Не стесняйтесь поиграть с примером в JSFiddle; это отличная небольшая игровая площадка для тестирования JS и CSS-кода. Я не вижу никакой непрозрачности в тесте ни в IE7, ни в IE8, но, как я уже сказал, мне пришлось угадать вашу HTML-структуру.

2. непрозрачность используется только для того, чтобы первое изображение исчезло, чтобы показать то, что за ним. HTML: <div class=»moveable»><li> <div class=»fade»><a href=»#»><img class=»bottom» src=»images/pic.jpg » /><img class=»topfade» src=»images/pic.jpg » /></a></div></li></div>

Ответ №1:

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

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

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

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