2011-11-08 4 views
1

내가 온라인에서 찾은 스크립트를 역순으로 코딩했는데 잘 작동하지만 유일한 문제는 호버 (hover) 이미지가 호버 동작이 발생할 때까지 완전한 가시성으로로드된다는 것입니다. 이것은 CSS 파일입니다png와 jquery를 사용하여 롤오버를 만드는 방법은 무엇입니까?

$(document).ready(function() 
{ 
$("img.b").hover(
function() { 
$(this).stop().animate({"opacity": "1"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}); 

}); 
</script> 

: 이것은 스크립트입니다

<style> 
div.fadehover { 
    position: relative; 
    } 

img.b { 
    position: absolute; 
    left: 0; 
    top: 0; 

     z-index: 10; 
    } 

img.a { 
    position: absolute; 
    left: 0; 
    top: 0; 
    } 
</style> 

그리고 이것은 몸의 코드입니다 : 당신은 여기의 샘플을 볼 수 있습니다

<div class="fadehover"> 
<a href=""><img src="portfolio_a.png" alt="" class="a" /> 
<img src="portfolio_b.png" alt="" class="b" /></a> 

</div> 

: http://www.kaimeramedia.com/derek/Website/test.html

답변

2

CSS를 변경하여 온로드를 숨기려면

img.b { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

filter:alpha(opacity=0); 라인은 I.E.

+0

http://jsfiddle.net/jasper/CyJXD/가 난 그냥 여기서 코드 스크립트 그것을 알고하지 않았다, 나는 그것이 가시성 문제를 알고 있었다 ... 감사 : 여기

위 솔루션의 jsfiddle입니다. –

관련 문제