hide an element on hover css that is not a direct child

Question

There is a gap in my css knowledge here. I am trying to hide an element when another element is hovered on using styled-components.

const InnerBox = styled.div`
   background: green;
   height: 20px;
   width: 20px;
   margin: 0 auto;
`

const BoxTwo = styled.div`
   height: 40px;
   width: 40px;
   background: red;
`

const Box = styled.div`
   height: 40px;
   width: 40px;
   background: pink;
   // This works as InnerBox is in Box
   &:hover ${InnerBox} {
     display: none; 
   }
   // This doesn't work as BoxTwo is not in Box
   &:hover ${BoxTwo} {
     display: none; 
   }
`

My jsx looks like this:

<BoxTwo />
<Box>
    <InnerBox />
</Box>
<BoxTwo />

Does anyone know how to target the two BoxTwo from the hover on Box?

It looks like it is not possible. I can target the one after, but not the one before

Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Arthur, Feb 05 '19 at 14:10
You may want to add a tag for the framework you're using, because that isn't standard CSS nor JavaScript. — Heretic Monkey, Feb 05 '19 at 14:12
Are you hovering on the InnerBox or the Box? One is possible other is not with just CSS — epascarello, Feb 05 '19 at 14:16
@HereticMonkey I have updated tags. I mentioned it in the question — peter flanagan, Feb 05 '19 at 14:18

Arkellys · Answer 1 · 2019-02-05T14:19:06.213

2

You can use the + selector:

#innerBox {
   background: green;
   height: 20px;
   width: 20px;
   margin: 0 auto;
}

#boxTwo {
   height: 40px;
   width: 40px;
   background: red;
}

#box {
   height: 40px;
   width: 40px;
   background: pink;
}

#box:hover #innerBox,
#box:hover + #boxTwo {
  display: none; 
}

<div id="box">
  <div id="innerBox"></div>
</div>
<div id="boxTwo"></div>

In your case it will be:

&:hover + ${BoxTwo} {
  display: none; 
}

The + selector will only work when the element (BoxTwo) is placed immediately after the parent selector (Box).

edited Feb 05 '19 at 14:19

answered Feb 05 '19 at 14:13

Arkellys

5,562
2
16
40

ok, cool, this works. How about if it is placed before the element?I need to update the question slightly – peter flanagan Feb 05 '19 at 14:20
1

@peterflanagan nope https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector CSS does not go backwards. – epascarello Feb 05 '19 at 14:21
@peterflanagan I am afraid you can't do that with CSS only. – Arkellys Feb 05 '19 at 14:21
god dang css :-D – peter flanagan Feb 05 '19 at 14:23

hide an element on hover css that is not a direct child

1 Answers1