how to trigger the selection of an element after a certain event in css?

Question

Lets say i have 2 elements on my website position at opposite ends 1 at the far right and other at the far left like

how do i make it so that when i hover over element 1 some property about element 2 changes say it's color. I have already tried a nested selector like-

#element1:hover{
#element2{
background-color:black;
}
}

but it didn't work. Is there a way to achieve this using only css and html if so how??

Possible duplicate of [On a CSS hover event, can I change another div's styling?](https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling) — Phani Kumar M, Sep 23 '17 at 13:44

score 0 · Answer 1 · answered Sep 23 '17 at 13:47

#element1:hover ~ #element2{
  background-color:black;
}

div{
   width: 200px;
   height: 200px;
   background: red;
   color: white;
}

<div id="element1">
  el1
</div>

<div id="element2">
  el2
</div>

You should learn how to use CSS Selector like ~ or +

how to trigger the selection of an element after a certain event in css?

1 Answers1