...">
Geek Answers Handbook

Hover over 1 child - hide other children that 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, everything is dimhidden, when I find any div dep, I have to make sure that its child dimremains hidden and show all the other dims. Can I do this with pure CSS for this HTML structure, or if between the elements dep, and dimthere are elements of the regime?

Thank.

+4
source share
4 answers

Here is a solution for 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>
Run codeHide result

You can also use 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>
Run codeHide result
+1
source

Try it like this. Red elements are elements that are initially hidden.

" " , . ! 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

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

.dim , .dim

+1

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

:

0

More articles:


All Articles