div и изображение в div act seperate

Question

Привет, ребята, у меня проблема с моим div и изображением (изображение находится на одном div) проблема в том, что верх div, где находится мой заголовок (h1), и изображение на div отвечают самостоятельно.

Я хочу, чтобы все происходило независимо от того, где я нахожусь на div, но на данный момент, если я навещу заголовок, изображение не изменится и наоборот. Поэтому мне было интересно, как заставить оба Div и image активировать свои команды «наведения», когда они либо зависнут.

В настоящее время изображение получает тень от разворота div (но все же только тогда, когда изображение зависает), поэтому я просто хочу, чтобы это и изображение становилось темнее, даже если заголовок загорелся.

не совсем уверен, какой код был бы полезен здесь, так что если вы хотите что-нибудь еще, просто спросите. Заранее спасибо.

HTML:

<a href="#"> 
<div id = "item1"> 
    <div id = "header"> 
    <h1>Results</h1> 
    </div> <!-- header end --> 
    <img src="Olympics1.png" alt = "olympic pic"> 
</div><!-- item 1 --> 
</a> 

CSS:

.mainBody #item1 :hover 
{ 
background-color: #50B847; 
color: #ffffff; 
box-shadow: 10px 10px 20px 1px #ccc; 
} 

#item1 img:hover 
{ 
-webkit-filter: brightness(35%); 
} 

Answer 1

Попробуйте this-

.mainBody #item1:hover 
{ 
background-color: #50B847; 
color: #ffffff; 
box-shadow: 10px 10px 20px 1px #ccc; 
} 
.mainBody #item1:hover img 
{ 
    -webkit-filter: brightness(35%); 
} 

Edits-
пространство удалены из .mainBody # item1: парить
измененными # item1 img: hover

Удаление места делает часть заголовка работать, и ваше изображение изменилось, когда мышка нависала над ним, но в модифицированном режиме наведите указатель мыши на «item1», и он изменит внешний вид заголовка и изображения.