CODEWITHSUNDEEP
cssreactjs
Yuki
Yuki

Reputation: 4173

Reference parent element in hover declaration without givin specific name to it

I have three divs, two are nested into a parent. I would like change the color of children when parent is hovered. Though I would like to do it without assigning a class name to the parent one.

I can't do that in parent because the childrent have color of their own that overrides the parent color and basically nothing happen on hover.

  <div
    css={css`
      flex: none;
    `}
  >
    <div
      css={css`
        display: inline;
        color: #ffffff;
        & :parent :hover { // incorrect, need something like this
          color: #ffa040;
        }
      `}
    >
    ...
    </div>
    <div>

Upvotes: 1

Views: 47

Answers (1)

StepUp
StepUp

Reputation: 38094

It can be done through CSS. Let me show an example:

.outer:hover .inner {
 background-color: orange;
}

HTML:

<div class="outer">
    1
    <div class="inner ">
    2
    </div>    
</div>

UPDATE:

Only div's, without classes:

CSS:

div:hover div {
    background-color: orange;
}

HTML:

<div>
     1
     <div>
          4
     </div>
</div>

Upvotes: 2

Related Questions