将鼠标悬停在 1 个子元素上 - 隐藏其他 div 内的其他子元素，仅限 css

这是问题：

<div class="dep-wrap">
    <div class="dep">
        <div class="dim"></div>
    </div>
    <div class="dep">
        <div class="dim"></div>
    </div>
    <div class="dep">
        <div class="dim"></div>
    </div>
</div>

最初全部dims 被隐藏，当我将鼠标悬停在任何depdiv 我需要确保它的孩子dim保持隐藏并显示所有其他dims。是否可以使用纯 CSS 来处理此 HTML 结构，或者之间是否存在模式元素dep and dim?

谢谢。

像这样尝试一下。红色项目是最初隐藏的项目。

值得注意的是选择器的“增加权重”使自己的子元素保持隐藏。否则你将不得不使用一个丑陋的！重要

div.dep-wrap div.dep:hover div.dim {
  display: none;
}

完整的CSS：

div.dep-wrap {
  width: 350px;
  height: 100px;
}

div.dep {
    width: 100px;
    height: 100px;
    background-color: green;
    display: inline-block;
}

div.dim {
  width: 100px;
  height: 100px;
  background-color:red;
  display: none;
}

/* show all items */
div.dep-wrap:hover div.dim {
  display: block;
}

/* hide the one you are hovering */
div.dep-wrap div.dep:hover div.dim {
  display: none;
}

http://codepen.io/anon/pen/JoGgjj http://codepen.io/anon/pen/JoGgjj