HTML/CSS - Transition Selector

Question

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:

When hovering over inner_01 the background-color of inner_02 and inner_03 should change.
When hovering over inner_02 the background-color of inner_01 and inner_03 should change.
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 :)

Those CSS selectors don't exist yet. Maybe in the future. Right now, you can only affect things that come after other things. A workaround would be to use JavaScript to assign and remove classes. — Mr Lister
– Mr Lister, Commented Jun 5, 2016 at 14:14
@MrLister Oh, that's pretty sad, but I'm happy for your quick answer. If you'd like to post a short answer (maybe with a minimal JavaScript hint) I'll happily accept it :) — LastSecondsToLive
– LastSecondsToLive, Commented Jun 5, 2016 at 14:17

nicael · Accepted Answer · 2016-06-05 14:21:04Z

5

You can change the color of all the inner_* divs and then change back to black the color of hovered inner_* div.

#wrapper:hover{
  color:red;
}
[id^=inner]:hover{
  color:black;
}

<div id="wrapper">
  <div id="inner_01">test1</div>
  <div id="inner_02">test2</div>
  <div id="inner_03">test3</div>
</div>

answered Jun 5, 2016 at 14:21

nicael

19.1k13 gold badges65 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mr Lister Over a year ago

Way better than a JavaScript based solution. I had to make some modifications to your method to make it satisfactory to the OP though.

nicael Over a year ago

@MrLister You mean transitions? As you've already mentioned them in your answer, there's a dilemma. Could I edit my answer to include transitions, i.e. [id^=inner]{transition:color 1s;}?

Mr Lister Over a year ago

Actually I meant the specificity of the colors. You change all of #wrapper, while the OP was concerned only about changing the three named divs inside. Oh, and background color rather than color.

nicael Over a year ago

@MrLister Ok, let it be this way :) Just a small notice: in your case you are targeting all the inner divs, not just inner* ;)

Mr Lister · Accepted Answer · 2016-06-05 14:47:34Z

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>

Collectives™ on Stack Overflow

HTML/CSS - Transition Selector

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related