LastSecondsToLive LastSecondsToLive - 5 months ago 8
CSS Question

HTML/CSS - Transition Selector

I have a setup like this:

<div id="wrapper">
<div id="inner_01"></div>
<div id="inner_02"></div>
<div id="inner_03"></div>
</div>


And I want to build a transition with the following properties:


  1. When hovering over
    inner_01
    the
    background-color
    of
    inner_02
    and
    inner_03
    should change.

  2. When hovering over
    inner_02
    the
    background-color
    of
    inner_01
    and
    inner_03
    should change.

  3. When hovering over
    inner_03
    the
    background-color
    of
    inner_01
    and
    inner_02
    should change.



This is my current approach:


  • Hover over
    inner_01
    :

    #wrapper #inner_01:hover ~ #inner_02 {
    /* Transition *
    transition: background 5s;

    /* Color */
    background: #ffee00;
    }

    /* Don't know how to effect inner_03 */

  • Hover over
    inner_02
    :

    #wrapper #inner_02:hover ~ #inner_03 {
    /* Transition *
    transition: background 5s;

    /* Color */
    background: #ffee00;
    }

    /* Don't know how to effect inner_01 */

  • Hover over
    inner_03
    :

    /* Don't know how to effect inner_01/inner_02 */



I think I'm missing some kind of CSS-selector...
Thanks for the help :)

Answer

Writing it out, this would require something like this in JavaScript (without any libraries).

document.getElementById('inner_02').addEventListener("mouseenter", function(event) {   
  document.getElementById('inner_01').classList.add('newbkgnd');
});

document.getElementById('inner_02').addEventListener("mouseleave", function(event) {   
  document.getElementById('inner_01').classList.remove('newbkgnd');
});

document.getElementById('inner_03').addEventListener("mouseenter", function(event) {   
  document.getElementById('inner_01').classList.add('newbkgnd');
  document.getElementById('inner_02').classList.add('newbkgnd');
});

document.getElementById('inner_03').addEventListener("mouseleave", function(event) {   
  document.getElementById('inner_01').classList.remove('newbkgnd');
  document.getElementById('inner_02').classList.remove('newbkgnd');
});
/* make the divs visible initially. Just for debugging purposes */
#wrapper > div {
 width: 20em; height: 2em;
 margin:.5em 0;
  border:1px solid;
  /* Transition */
  transition: background-color .5s;
}

#inner_01:hover ~ #inner_02,
#inner_01:hover ~ #inner_03,
#inner_02:hover ~ #inner_03,
.newbkgnd {
  /* Color */
  background-color: #ffee00;
}
<div id="wrapper">
  <div id="inner_01"></div>
  <div id="inner_02"></div>
  <div id="inner_03"></div>
</div>

Edit: or, of course, based on @nicael's answer, this much simpler CSS-only solution...

/* make the divs visible initially. Just for debugging purposes */
#wrapper > div {
 width: 20em; height: 2em;
 margin:.5em 0;
  border:1px solid;
  /* Transition */
  transition: background-color .5s;
}

#wrapper:hover > div {
  /* Color */
  background-color: #ffee00;
}
#wrapper:hover > div:hover {
  background-color: inherit;
}
<div id="wrapper">
  <div id="inner_01"></div>
  <div id="inner_02"></div>
  <div id="inner_03"></div>
</div>

Comments