div와 div 내의 이미지가 분리되어 작동

Question

안녕하세요, 저는 div와 이미지에 문제가 있습니다 (이미지는 동일한 div에 있음). 문제는 내 헤더 (h1)가있는 div의 상단과 이미지입니다. div에 독립적으로 응답합니다.

div에 마우스를 올려 놓는 위치에 상관없이 모든 일이 일어나길 원합니다.하지만 헤더에 마우스를 가져 가면 이미지가 바뀌지 않으며 그 반대도 마찬가지입니다. 그래서 어느 쪽이든 위에 얹혀있을 때 나의 Div와 이미지가 그들의 "공중 선회"지시를 활성화시키는 방법을 궁금하게 생각하고 있었다.

현재 이미지가 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 :
수정 #의 항목 1을 가져 :

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

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

Answer 1

는 .mainBody 번호의 항목 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-
공간을보십시오 img : 호버

공간을 제거하면 헤더 부분이 작동하고 이미지 위에 마우스를 올려 놓으면 이미지가 변경되지만 수정 된 이미지에서는 'item1'위로 마우스를 가져 가면 헤더와 이미지의 모양이 바뀝니다.