호버 효과가있는 선택기를 사용하는 방법

Question

특정 이미지가 맴돌 때 특정 텍스트가 나타나도록하려고합니다.

<div class="container"> 
    <div class="pic1"> 
    <img src="linkToThePicture" class="imag"> 
    <p>this should appear when the pic1 div is hovered</p> 
    </div> 
    <div class="pic2"> 
    <img src="linkToThePicture2" class="imag"> 
    <p>this should appear when the pic2 div is hovered</p> 
    </div> 
</div> 

그리고 내가이 CSS가 말할 수 :

이

div { 
height: 150px; 
width: 150px; 
/*makes all the picture containers same size*/ 
float: left; 
display: inline; 
/*makes all the pictures come one after another in a row*/ 
} 

p { 
opacity: 0; 
/*do this so that all the p's are invisible at first*/ 
} 

.container { 
height: 1000px; 
width: 1000px; 
/*arbitrary settings for height and width of the container, if i am correct, this will override the above mentioned div settings*/ 
} 

.imag { 
width: 150px; 
height: 150px; 
/*makes all pics same size*/ 
} 

/*now i would need something here to make it so when pic1 is hovered, it p element would change to have "opacity: 1;". My original thought would be this:*/ 
.div1:hover .div1 < p { 
opacity: 1 !important; 
/*but that didnt work!*/ 
} 

그래서 누군가가이 작업을 수행하는 올바른 방법을 알고 않습니다를

그래서 나는이 HTML을 가지고 말할 수? 감사!

Answer 1

가장 간단한 해결책은 .div1:hover .div1 < p {을 .pic1:hover p으로 변경하는 것입니다.

몇 가지 이유로 작동하지 않습니다 코드 :

클래스 "div1"

<와 아무것도가 CSS 선택기에는 의미가 없습니다되어

.pic1:hover p 수단 " 모든 p은 호크되고있는 클래스 pic1의 요소 안에 있습니다. " 당신이 조금 더 코드를 정리하고 싶었

,이 같은 pic 클래스를 정의하고 모두 div들에 추가 할 수 있습니다

.pic { 
    height: 150px; 
    width: 150px; 
} 

그런 식으로, 당신은을 재설정 할 필요가 없습니다 것입니다 컨테이너 요소의 크기 그런 다음, 두 div의이 선언을 추가하고이 적용됩니다 :

.pic:hover p { 
    opacity: 1; 
} 

Answer 2

가 마크 업에 직접 인접 해 있기 때문에 당신은 형제 선택기를 사용하여 멀리 얻을 수 있어야 :의

.container .imag:hover+p { 
    opacity: 1; 
}