Emotion: Target another component on hover using emotion-js

[sptGabriel]

Hello i have a problem to target another component in focus using emotion-js

i try this:

  &:hover + ${WrapScrollable} {
    background: red;
  }

but dont work

my code:

const WrapScrollable = styled.div`
  height: calc(100% - 165px);
  overflow: scroll;
  background: orange;
  margin-bottom: 100px;
`;

const Litem = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  background: hotpink;
  &:hover + ${WrapScrollable} {
    background: red;
  }
`;

example:

https://codesandbox.io/s/dazzling-turing-qbzlh?file=/src/App.js

[Andarist]

Is this what you are looking for - https://codesandbox.io/s/vibrant-snow-nww98?file=/src/App.js ?

[sptGabriel]

Is this what you are looking for - https://codesandbox.io/s/vibrant-snow-nww98?file=/src/App.js ?

Hello I ended up changing the codesandbox but basically I want to add a css to the parent when the li tag is hovered

my parent have overflow-y: auto

on hover li i want overflow-y: hidden;

https://codesandbox.io/s/stupefied-matsumoto-b37pu?file=/src/App.js

[Andarist]

I want to add a css to the parent when the li tag is hovered

This is just not possible in CSS and emotion is CSS after all - even if authored in JS files. So this is impossible - you need to implement this using JS.

[sptGabriel]

I want to add a css to the parent when the li tag is hovered

This is just not possible in CSS and emotion is CSS after all - even if authored in JS files. So this is impossible - you need to implement this using JS.

@Andarist hii thank u for help

and about this:
https://codesandbox.io/s/vibrant-snow-nww98?file=/src/App.js
how i can make this with css from '@emotion/core' ?

[Andarist]

Use data attribute if needed: https://codesandbox.io/s/festive-ramanujan-jlhds?file=/src/App.js

[JuanDiegoAcostaT]

Use data attribute if needed: https://codesandbox.io/s/festive-ramanujan-jlhds?file=/src/App.js

this Workssss