html - 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:

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

编辑-
从 .mainBody 中删除空间#item1 :hover
修改#item1 img:hover

删除空格会使标题部分起作用，并且当鼠标悬停在其上时您的图像会发生变化，但在修改后的图像中，将鼠标悬停在“item1”上会改变标题和图像的外观。