Для изменение свойства того или иного элемента в CSS существует такой понятие как селектор :hover.
Особенно широкое распространение hover приобретает когда нужно изменить свойство ссылки при наведении курсора. Например мы легко может подчеркнуть ссылку, которая по умолчанию не подчеркнута:

<style>
a:link, a:visited{
color: green;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
</style>
<a href="https://weblomaster.ru/category/css/">Уроки, рецепты CSS</a>

При помощи a:link и a:visited мы указали свойства для всех ссылок, в том числе тех по которым пользователь переходил ранее (:visited). Все ссылки приобретают зеленый цвет и становятся похожими на обычный текст, без подчеркивания. В то время как a:hover дает указание подчеркнуть ссылку при каждом наведении курсора.
Таким же образом мы можем добавить бордюр изображению при наведении мышки:
<style>
img{
border:1px solid green;
}
</style>
<img src="https://weblomaster.ru/wp-content/uploads/2014/03/CSS_spaces_important_style_class_id-300x300.jpg" />

Поупражнявшись с простыми примерами, перейдем к более редкой задаче , которая была вынесена в заголовок статьи.  Как изменить свойства дочернего элемента при наведении курсора на родительский элемент?
Ситуация разрешается очень просто . Вначале озвучивается родительский элемент с селектором :hover , затем идет обозначение дочернего элемента который необходимо трансформировать:

<style>
p{
font-size:12px;
}
span{
color:green;
}
p:hover span{
color:red;
}
</style>
<p>Жизнь прожить ,
<span>не стили CSS выучить.</span>
</p>
<span>CSS выучить, не жизнь прожить.</span>

При наведении на первое предложение, текст внутри тега <span> подсвечивается красным. При этом часть вне <span> остаётся зеленой. Также цвет не меняется при наведении курсора на нижний текст , расположенного за пределами тега <p>.
Чтобы рецепт стал более наглядным, озвучим конкретное техническое задание: имеется блок DIV , внутри которого помещено два изображения. Первое изображение показано, а второе – спрятано и должно появляться только при наведении мышки на блок DIV.
Рецепт решения прост:
<style>
div#Blok{
position: relative;
}
div#Block:hover img#Layer{
position: absolute;
top: 50px;
left: 50px;
z-index: 100;
box-shadow: 0px 0px 25px green;
display:block !important;
}
img#Layer{
display:none;
}
</style>
<div id="Block">
<img id="First" src="video.png" />
<img id="Second" src="playButton.png" />
</div>

Посмотрите сами как это работает: при наведении курсора на изображение монитора , появляется стрелка с зеленой тенью в левом верхнем углу. Когда пользователь убирает курсор с изображения, изображение playButton.png снова пропадает.

Стоит вспомнить что конструкция div#Block:hover применяется в случае когда у <DIV> есть id=»Block» . Когда речь идет о классе class=»Block» используют точку div.Block:hover .