CSS悬停：如何更改父级的同级孩子

Question

我相信我想实现的目标应该使用Javascript来完成，但是我想听听比我更熟悉CSS和选择器的开发人员的一些意见。

这是我的html代码的示例。我不会粘贴任何CSS样式，因为它无法按预期工作，并且可能比导致解决方案带来更多麻烦。

我的问题是我是否可以使用CSS切换父级兄弟姐妹子元素的可见性。

更具体地说，我想做的是要加载隐藏了“ item-hover”类元素的孩子的页面。当鼠标移到“ item-hover”类上时，我希望它的孩子可见（而当鼠标离开时，它们又变得不可见）。但是，我希望当鼠标移到“ item-title”类的任何元素上时，“ item-hover”类的子项也变得可见。 “ item-title”类必须是一个单独的div，并且不能包含在“ item-hover”元素中。

<div class="item">
  <img src="image.jpg" class="item-image">
  <div class="item-hover">
   <div class="overlay"></div>
   <div class="overlay-icon">
     <span class="icon-edit"></span>
     <span class="text-for-icon">Edit</span>
   </div>
  </div>
  <div class="item-title">
    <div class="icon"></div>
    <div>
     <div class="item-name"> A NAME </div>
     <div class="item-tags">
       <span> #food </span>
       <span> #burger </span>
       <span> #taste </span>
     </div>
   </div>
  </div>
</div>

我希望这是有道理的。谢谢您的帮助。