Hover effect cannot be applied to previous by using selectors

Question

Issue description:

I want to make the class .firstand class .third visible after :hover over class .second by using the display: unset css command. Actuall issue is, that I can change the display of the element implemented after (.third) the class .second and not the element implemented before (.first). I tried every me known selector for the classes that should affect onto the hover (+ and ~ and space);

Code

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.first {
  background: red;
  display: none;
}
.second {  
  background: blue;
}
.third {
  background: red;
  display: none;
}

.second:hover + .first {
  display: flex;
}
.second:hover + .third{
  display: flex;
}

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

Further information: I know it's possible to solve this by getting the value class via JavaScript and edit the style properties. This is not what i want. I want a pure CSS solution.

Thank's for your help

score 2 · Answer 1 · answered Jun 11 '18 at 08:46

Selecting previous sibling elements is currently not possible via CSS so the easiest way to make the class .firstand and class .third visible after :hover over class .second is to utilise :hover on the parent element (in this case .container).

The user experience is almost the same, only difference being :hover staying true if you move your cursor over to .third or .first.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.first {
  background: red;
  display: none;
}
.second {  
  background: blue;
}
.third {
  background: red;
  display: none;
}

.container:hover .first,
.container:hover .third {
  display: flex;
}

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

I am unsure wich answer to set as correct because of the fact your both answers work pretty fine. Only issue with your solution is that in case I have something like an input and I want to change the hover into a focus the container option would not work. So for the sake of more flexible solution I have to choose those with the order property in css. Thanks anyway for your quick answer. — Jonathan Stellwag, Jun 11 '18 at 10:24

Takit Isy · Accepted Answer · 2018-06-11T09:46:59.627

You can achieve what you want using the general sibling selector ~ and the order property.
Note that I've put the second element first in the HTML.

But, that makes a crazy behaviour, as your first element appears on the position of the second element on hover…

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.first {
  background: red;
  order: 1; /* TAKIT: Added this */
  display: none;
}
.second {  
  background: blue;
  order: 2; /* TAKIT: Added this */
}
.third {
  background: red;
  order: 3; /* TAKIT: Added this */
  display: none;
}

/* TAKIT: Changed the below */

.second:hover ~ div{
  display: flex;
}

<div class="container">
  <div class="second">Second</div><!-- TAKIT: Changed order here -->
  <div class="first">First</div>
  <div class="third">Third</div>
</div>

⋅ ⋅ ⋅

Maybe you want to do something like this instead:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.first {
  background: #f88;
  order: 1;
  display: none;
}
.second {  
  background: #88f;
  order: 2;
}
.third {
  background: #f88;
  order: 3;
  display: none;
}

.second:hover ~ div {
  display: flex;
}

/* TAKIT: Added the below */

body {
  font-family: Sans-serif;
}

.container div {
  padding: 10px;
  width: 100%;
  text-align: center;
}

.container .first:hover, .container .third:hover {
  display: flex;
  background: #8f8;
}

<p>(Try to hover from the center)</p>
<div class="container">
  <div class="second">Second</div>
  <div class="first">First</div>
  <div class="third">Third</div>
</div>

Doc about order: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Hope it helps.

Hover effect cannot be applied to previous by using selectors

2 Answers2