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：
修正＃のITEM1を置く：

.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番号のITEM1から削除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'にカーソルを置くと、ヘッダーと画像の外観が変更されます。