悬停在 1 个孩子上 - 隐藏其他 div 内的其他孩子，仅 css

Question

问题来了：

<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 都是隐藏的，当我将任何dep div 悬停时，我需要确保其子dim 保持隐藏并显示所有其他dims。是否可以使用这种 HTML 结构来处理纯 CSS，或者 dep 和 dim 之间是否存在模式元素？

谢谢。

Answer 1

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

需要注意的重要一点是选择器的“附加权重”使自己的子项隐藏起来。否则，您将不得不使用丑陋的 !important

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

Answer 2

这是一个 JavaScript 解决方案。

var dep = document.getElementsByClassName('dep');
var dim = document.getElementsByClassName('dim');

for (i = 0; i < dep.length; i++) {
  dep[i].addEventListener('mouseover', function() {
    for (j = 0; j < dep.length; j++) {
      if (dep[j] != this) {
        for (k = 0; k < dep[j].children.length; k++) {
          dep[j].children[k].style.opacity = '1';
        }
      }
    }
  })
  dep[i].addEventListener('mouseleave', function() {
    for (j = 0; j < dep.length; j++) {
      for (k = 0; k < dep[j].children.length; k++) {
        dep[j].children[k].style.opacity = '0';
      }
    }
  })
}

.dep-wrap {
  width: 360px;
  height: 120px;
  background-color: lightblue;
}
.dep {
  display: inline-block;
  width: 110px;
  height: 110px;
  background-color: coral;
  cursor: pointer;
  margin: 5px;
}
.dim {
  width: 100px;
  height: 100px;
  background-color: black;
  margin: auto;
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.4s;
}

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

---

你也可以使用 jQuery。

$('.dep').hover(function() {
  $(this).parent().children().not(this).find('.dim').css({'opacity' : '1'})
}, function() {
  $('.dim').css({'opacity' : '0'})
})

.dep-wrap {
  width: 360px;
  height: 120px;
  background-color: lightblue;
}
.dep {
  display: inline-block;
  width: 110px;
  height: 110px;
  background-color: coral;
  cursor: pointer;
  margin: 5px;
}
.dim {
  width: 100px;
  height: 100px;
  background-color: black;
  margin: auto;
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.4s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 3

.dep-wrap:hover > .dep > .dim {
    display: block
}
.dep-wrap:hover > .dep:hover > .dim {
    display: none
}   

悬停父级会使所有.dim 可见，但我们会再次删除当前悬停的.dep 的.dim

Answer 4

使用 css，您可以使用 ~ 通用兄弟选择器仅定位下一个兄弟。

.dep, .dim { height: 80px; width: 80px; display: inline-block; }
.dep { background: blue; }
.dim { background: orange; display: none; }

.dep:hover ~ .dep .dim { display: inline-block; }

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

参考：General sibling selectors