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

44
February 06, 2019, at 00:00 AM

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

Answer 1

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).

Answer 2

If you want to hide element before the one your mousing over you can use JavaScript like this, if you can use jquery toggle can be used as well.

function hide(id) { 
  id.style.visibility = "hidden" 
} 
 
function show(id) { 
  id.style.visibility = "visible" 
}
#innerBox { 
  background: green; 
  height: 20px; 
  width: 20px; 
  margin: 0 auto; 
} 
 
#boxTwo { 
  height: 40px; 
  width: 40px; 
  background: red; 
} 
 
#box { 
  height: 40px; 
  width: 40px; 
  background: pink; 
}
<div id="boxTwo"></div> 
<div id="box"> 
  <div id="innerBox" onmouseover="hide(boxTwo)" onmouseout="show(boxTwo)"></div> 
</div>

READ ALSO
Bit Shifting - Why is this code using 24, 16, and 8 right shift?

Bit Shifting - Why is this code using 24, 16, and 8 right shift?

I am looking at this java code and trying to understand itI understand everything about it except the bit shifting part

70
Dividing fetched values by other fetched values produce zero instead of proper double

Dividing fetched values by other fetched values produce zero instead of proper double

Well I have a program (In eclipse, with Java) that's using matrix multiplication and suchAnd for this particular problem, I have a 2x2 matrix that needs to be multiplied by values calculated by my program

49
How to do aggregation on fixed-size count-based sliding window?

How to do aggregation on fixed-size count-based sliding window?

How do I implement a sliding window aggregation (or transformation) with a fixed-size count-based window?

44
Email sending very slow with XXAMP

Email sending very slow with XXAMP

I have xxamp configured to send PHP mail through my optonline email service providerThe problem is that -- although it does work -- it takes a very long time for sends to complete, which affects other aspects of my PHP scripts

46