How to achieve the same effect for hover in emotion?

Question

say I have this in a css file:

.a-hover {
  background-color: red;
}

.a-hover:hover {
  background-color: blue;
}


.b.a-hover {
  background-color: yellow;
}

.b.a-hover:hover {
  background-color: green;
}

how do I achieve this in emotion?

I know I can do:

css`
 &:hover {
   background-color: red;
 }
`,

but in my specific example the hover has a different effect depending on whether it's:

• row is hovered
• individual item is hovered
• nothing is hovered

how do I achieve that?

Answer 1

Something like this?

.outer{
  background:#6D8B74 !important;
}

.inner{
  background:#7D1E6A !important;
}

.outer:hover .inner{
  background:#97C4B8 !important;
}

.outer .inner:hover{
  background:#79DAE8 !important;
}

div{
  transition:all .5s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3">

  <div class="row">

    <div class="card card-body p-5 outer">
     <div class="card card-body inner p-5">
     
    </div>
    </div>

  </div>

</div>