호버에 다른 이미지를 표시하려면 어떻게해야합니까?

Question

이것은 간단한 질문 일 수는 있지만 제대로 작동하지 않을 수는 없습니다. 커서가 가리킬

<div id="wrapper"> 
<img class="album-pic-exit" src="images/exit.jpeg"> 
<img class="album-pic" src="images/blank.gif"> 
</div> 

#wrapper.album-pic-exit { display:none; } 
#wrapper.album-pic:hover +.album-pic-exit { display:block } 

기본적 때 "앨범 그림"는 "앨범 그림 출구"가 나타날 : 여기 가 설정 한 기본이다 (I는 관련이없는 모든 위치 등을 놓친) . 나는 "..exit"을 호버의 반복적 인 배경이되도록함으로써이 작업을 만들었지 만, 나는 더러운 것과 확실하게 더 쉬운 솔직한 해결책이 있어야한다고 생각한다. 나는 비교적 새로운데, 나는 구문에 틀린 점이라면 Google에 의존하기보다 스스로를보고 실험함으로써 더 잘 작동한다고 믿습니다. p.s 나는 자바 스크립트 또는 jQuery가 아닌 css의 walkthrough 솔루션을 원합니다.

Answer 1

당신은 이런 식으로 할 수있다; 그러나,이 같은 두 이미지의 순서를 전환해야합니다 : 우리가 display: none와 exit 이미지를 숨기

.album-pic-exit { 
    display: none; 
} 
.album-pic:hover + .album-pic-exit { 
    display: inline; 
} 

첫째 :

<div id="wrapper"> 
    <img class="album-pic" src="images/blank.gif"> 
    <img class="album-pic-exit" src="images/exit.jpeg"> 
</div> 

는이 CSS를 사용합니다. 그런 다음 인접한 형제 선택기 +을 사용하여 다른 이미지를 마우스로 가리키면 exit 이미지를 선택합니다. 어쨌든

<div id="wrapper"> 
    <img class="album-pic" src="images/blank.gif"> 
    <img class="album-pic-exit" src="images/exit.jpeg"> 
    </div> 

이 더 나은 것 :

<div id="wrapper"></div> 

    #wrapper { 
       width:ALBUM_PIC_WIDTH; 
       height:ALBUM_PIC_HEIGHT; 
       background:url(ALBUM_PIC_URL) 0 0 no-repeat; 
} 

#wrapper:hover { 
       background:url(ALBUM_PIC_EXIT) 0 0 no-repeat; 
} 

Answer 2

Amazing Hover Effects with CSS3 is a good tutorial:.
CSS :

div.shadow { 
    width: 300px; 
    margin: 20px; 
    border: 1px solid #ccc; 
    padding: 10px; 
    } 
div.shadow:hover { 
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); 
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); 
    box-shadow: 0 0 5px rgba(0,0,0,0.5); 
    } 

HTML :

<div class="shadow"> 
Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in. 
</div> 

Answer 3

많은 가능성 CSS에서 더 뒤로 선택기가 CSS를 위해 다음과 같은 HTML을해야합니다, 그래서 거기에, 먼저 :) 물론 자본재에 대한 URL을 입력하십시오. 코딩 문제와 관련하여 두 가지 이미지가 필요할 경우 Google에서 '자바 스크립트 롤오버 자습서'를 사용할 수도 있습니다. 질문 : Cheerz에 사이먼