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>

最初隐藏所有dim，当我悬停任何dep div时，我需要确保其子dim仍然隐藏并显示所有其他dim s。是否可以使用此HTML结构的纯CSS或dep和dim之间是否存在模式元素？

谢谢。

Answer 1

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

重要的是要注意增加的重量＆＃39;保持自己的孩子隐藏的选择器。否则你将不得不使用一个丑陋的！重要的

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

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

将父项悬停在所有.dim上可见，但我们会再次删除当前悬停的.dep .dim

Answer 3

这是一个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 4

使用css，您只能使用~一般同级选择器定位下一个兄弟姐妹。

＆＃13;

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

＆＃13;

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

＆＃13;

参考：General sibling selectors

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

4 个答案: