Как использовать селекторы с эффектами зависания

Question

Я пытаюсь сделать это, когда определенное изображение зависло, появляется определенный текст!

так что позволяет сказать, у меня есть этот HTML:

<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!*/ 
} 

Так кто-нибудь знает правильный способ сделать это? Благодаря!

Answer 1

Наиболее простым решением было бы изменить .div1:hover .div1 < p { на .pic1:hover p.

Ваш код не работает по нескольким причинам:

1. Там ничто с классом «див1»
2. < имеет никакого значения в селекторе 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; 
}