CSS hover image animate a sibling element

Question

Я хочу навести курсор на изображение для анимации и отображения блока текста с помощью CSS. Проблема в том, что я могу только представить анимированные дочерние элементы.

<div id="does-not-work"> 
    <p>DOES NOT WORK</p> 
    <p>Hover over the image</p> 
    <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"/> 
    <p class="show-bubble">Should display this text</p> 
</div> 

#does-not-work img:hover .show-bubble{ 
    max-height: 200px; 
} 

Я ожидаю, что я парить над IMG элемент внутри #does-not-work DIV и Шоуда изменить максимальную высоту .show-bubble. Но это не так.

Использование HTML конструкции, как это работает, хотя:

<div id="does-work"> 
    <p>DOES WORK</p> 
    <p>Hover over the image</p> 
    <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"/> 
    <p class="show-bubble">Should display this text</p> 
</div> 

#does-work:hover .show-bubble{ 
    max-height: 200px; 
} 

Это происходит потому, что зависать теперь на родительский элемент блока я хочу показать. Проблема заключается в том, что я только хочу, чтобы вызвать эффект анимировать, когда пользователь наводит курсор на изображение, а не весь блок

https://plnkr.co/edit/4qbwdGkW9l5P6WvvtTsP?p=preview

Answer 1

Это потому, что у вас есть .hover для родительского элемента и img тег вместе. Так как парения триггеры одновременно

Remove this code 
#does-not-work img:hover .show-bubble{ 
    max-height: 200px; 
} 

#does-work:hover .show-bubble{ 
    max-height: 200px; 
} 

And add this code 

#does-not-work img:hover ~ .show-bubble{ 
    max-height: 200px; 
} 

Answer 2

попробовать этот

#does-not-work img:hover + .show-bubble{ 
    max-height: 200px; 
} 

Или

#does-not-work img:hover ~ .show-bubble{ 
    max-height: 200px; 
} 

Answer 3

Для того, чтобы сделать парения работу, которую нужно изменить код на следующее:

#does-not-work img:hover + .show-bubble{ 
    max-height: 200px; 
} 

и парения будет срабатывать при наведении курсора мыши на изображение в отличие от div.

Оператор плюс (+) в CSS является смежным селектором. Он выберет элемент после изображения, которое вы хотите.