1

I know how to change elements while hovering over a different element, but what I want to know is can I actually change the styling of an element that is in a completely different parent than the hovered element rather that using + or > ...ect to style siblings and stuff. So for example if i had an HTML structure like this

<div id="firstParent">

     <div id="firstParentInner">
         <a id="hoverMe">Hello world</a>
     </div>

</div>


<div id="randomDiv"></div>


<div id="changeMyInner">
      <div id="changeMyChild">
         <div id="changeMe"></div>
      </div>
</div>

Can I change the styles of id changeMe by hovering over hoverMe which just CSS

so the CSS would kind of be like

#firstParent #hoverMe:hover ~ #changeMyInner #changeMe{
     background: red;
}

Thanks

Brady
  • 733
  • 1
  • 6
  • 16

1 Answers1

0

In short - no.

There are 3 possible scenarios:

Element directly inside parent:

#container:hover > .column { background-color: black; }

If element is next to other element:

.column:hover + .column { background-color: black; }

And if element is somewhere inside parent ,anywhere:

#container:hover .element { background-color: black; }

Thats about it.

Goran Jakovljevic
  • 2,714
  • 1
  • 31
  • 27