기본 CSS 호버 이미지 스왑?

저는 웹 개발 초보자이며 두 이미지를 "바꿔"넣으려는 것에 대한 질문이 있습니다.기본 CSS 호버 이미지 스왑?

이 CSS와 마크 업을 작성했지만 어떤 이유로 작동하지 않는 것 같습니다. 첫 번째 이미지 위에 마우스를 올려 놓을 때 바꿔야 할 두 번째 이미지는 페이지의 첫 번째 이미지 위에 놓이기 만하면됩니다.

CSS :

.home { 
    margin: 0; 
    padding: 0; 
    background: url('images/onhome.png') no-repeat; 
} 

.home a, .nav a:link, .nav a:visited { 
    display: block; 
    width: 90px; 
    height: 25px; 
} 

.home a:hover img { 
    visibility: hidden; 
}

HTML : 내가 잘못이야, 누군가가 나를 도울 수 있다면 매우 감사 할 줄 모르겠어요

<div class="home"> 
    <a href="#"> 
    <img src="style/images/home.png" width="65" height="18" alt="" /> 
    </a> 
</div>

. 이것을하는 또 다른 좋은 방법이 있다면, 나는 그것에 대해서 확실히 열려있을 것입니다.

출처

2013-03-18 Rowan K.

배경 이미지 :-) 사진 호랑이 새끼로 변경됩니다 늑대 위에 커서를 놓으면 http://jsfiddle.net/c9sRa/

는'img' 없습니다. 대신에 다른 이미지로'background-position'을 사용해보십시오. –

@ 티타늄 아니요. –

@ jimjimmy1995 - 네 말이 맞아, 나는 총을 거기 조금 뛰어 넘었다. –

한 가지 방법은 <img>을 잊어 버리고 :hover에서 배경 이미지 URL을 변경하는 것입니다.

#home { 
    background: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/grey-wolf_565_600x450.jpg) no-repeat; 
    height: 600px; 
    width: 600px; 
} 

#home:hover { 
    background: url(http://25.media.tumblr.com/tumblr_m6fmnhxL3B1r7wu2mo1_500.jpg) no-repeat; 
}

근무 예 : 당신이

출처

2013-03-18 00:39:47 ktm5124

답장을 보내 주셔서 감사합니다. 지금 당장 시도해보십시오! –

이렇게하는 방법에는 여러 가지가 있습니다. 다른 하나는 자바 스크립트를 사용하는 것입니다. 나는 최선의 방법은 당신의 상황에 달려 있다고 생각합니다. – ktm5124

몇 가지 이유로 지금은 페이지의 전체 이미지를 볼 수 없습니다. 내가 그것을 감추고있는 배경 이미지 패턴을 가지고 있기 때문에 그런가? 허버 효과가 작동하는 것처럼 보입니다. –

기본 CSS 호버 이미지 스왑?

답변

관련 문제