div中的div和image单独行动

Question

嘿伙计们我的div和图像有问题（图像在同一个div上）问题是我的标题（h1）所在的div的顶部和div上的图像是独立响应的

我希望一切都能发生，无论我在哪里盘旋，但是如果我将鼠标悬停在标题上，图像不会改变，反之亦然。所以我想知道如何使我的Div和图像激活他们的＆＃34; hover＆＃34;任何一个悬停的说明。

目前图像正在从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%);
}