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

Question

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.

Chris Laarman · Answer 1 · 2014-12-10T14:30:41.393

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

edited Dec 10 '14 at 14:30

answered Dec 10 '14 at 14:24

Chris Laarman

1,559
12
25

1

Nice way didn't think about this, plus 1 – DaniP Dec 10 '14 at 14:27
Now this is where we are moving somewhere. Thank you. Can we not use `dep-wrap:hover`? The thing is that this div is much bigger than its children all together, so all children become affected from far distance, before I even come close to `dep`s. – nrvnm Dec 10 '14 at 14:46
You need that wrapper to access the other items. You might want to add another div that wraps tightly around the items. Then the same solution will work, but you will need a small change in the structure. – Chris Laarman Dec 10 '14 at 21:15

score 1 · Answer 2 · answered Dec 10 '14 at 14:24

1

.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

answered Dec 10 '14 at 14:24

Laurens Kling

2,221
1
21
31

Weafs.py · Accepted Answer · 2014-12-23T11:07:18.743

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>

@chipchocolate-py thank you for your solution too. Since I couldn't get it done via css only without making everything ugly, I'll go with js, but could you please suggest elegant jQuery solution? This would be really awesome :) — nrvnm, Dec 23 '14 at 10:48
Thank you! As I couldn't do it with css only, I'll accept your answer as correct then. — nrvnm, Dec 23 '14 at 11:50

score 0 · Answer 4 · answered Dec 10 '14 at 14:19

0

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

answered Dec 10 '14 at 14:19

emmanuel

9,607
10
25
38

Thank you, but this is not what I'm after. Hovering any `dep` should hide (or color) all other `dim`s except for the one we hover. If that makes sense. – nrvnm Dec 10 '14 at 14:25
This is not possible with css, you can't target previous elements. – emmanuel Dec 10 '14 at 14:26

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

4 Answers4

Linked