Hover on 1 child - hide other children which are inside other divs, css only

问题

here is the 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>

Initially all dims are hidden, when I hover any dep div I need to make sure its child dim remains hidden and show all other dims. Is it possible to do with pure CSS with this HTML structure or if there are mode elements between dep and dim?

Thank you.

回答1:

Here is a JavaScript solution.

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>

---

You could use jQuery as well.

$('.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>

回答2:

Try it like this. The red items are the items that are initially hidden.

Important to notice is the 'added weight' of the selector that keeps the own child hidden. Else you would have to use an ugly !important

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

Full 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

回答3:

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

hovering the parent makes all .dim's visible, but we remove the current hovered .dep's .dim again

回答4:

With css you could target only next siblings using ~ general sibling selector.

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

Reference: General sibling selectors

来源：https://stackoverflow.com/questions/27403135/hover-on-1-child-hide-other-children-which-are-inside-other-divs-css-only