ie7에 표시되는 대신 이미지가 사라짐

마우스를 가져 가면 다른 이미지로 변경되도록 CSS 호버 및 불투명도를 사용합니다. 상단에 배치하고 불투명도를 설정하여 호버 및 하단 이미지에서 사라 지도록 설정합니다. 남았습니다. 이것은 IE8, IE9과 파이어 폭스에 있지만 IE7에서 잘 작동ie7에 표시되는 대신 이미지가 사라짐

#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; 

}

첫 번째 이미지가 보이지 않게 될 때 두 번째 이미지가 없습니다가 다음과 같이 코드입니다. 누구든지이 문제를 해결하는 방법을 알고 있습니까?

출처

2011-04-06 holly

내 대답이 좋지 않아서 삭제했습니다. jsfiddle에서 CSS로 작업하려고 노력했습니다. http://jsfiddle.net/8HLdx/를 참조하십시오. 그러나 HTML 코드를 볼 필요가 있다고 생각합니다. JSFiddle에서 예제로 자유롭게 플레이하십시오. JS 및 CSS 코드 테스트를위한 작은 놀이터입니다. IE7 또는 IE8에서 테스트의 불투명도는 보이지 않지만 HTML 구조를 추측해야합니다. – Spudley

불투명도는 첫 번째 이미지가 사라지는 것을 막기 위해 사용됩니다. html은 다음과 같습니다.

– holly

나는 크롬, 파이어 폭스 및 IE7에서 나를 위해 작동하는 것 같다 made a demo 있습니다. 그것은 -ms-filter 규칙으로 IE8 +에서 작동

그러나 IE7의 불투명도는 filter:alpha(opacity=xx) 규칙은 그 값이 between 0 and 100을해야, 올바른 것입니다. 현재 값 .5은 잡힌 이미지를 거의 완전히 불투명하게 만듭니다 (그리고 나는 그것이 유효하다는 것을 확신하지 못합니다).

quirksmode에는 IE에 대한 다양한 불투명도 CSS 규칙이 요약되어 있습니다.

참고 : 예제 구조에서는 내가 데모에 추가 한 <li> 앞에 <ul> 또는 <ol>이 누락되었습니다.

출처

2011-05-31 13:19:12 andyb

ie7에 표시되는 대신 이미지가 사라짐

답변

관련 문제