I have two elements div
, what I want to achieve is that hovering over the first element changes the color of the second, and hovering over the second changes the color of the first. I don't know if it can be done with pseudo classes.
This is the code I have
#div1
{
position: absolute;
top: 10px;
left: 10px;
}
#div1:hover
{
color: red;
}
#div2
{
position: absolute;
top: 30px;
left: 10px;
}
<body>
<div id="div1">Div número 1</div>
<div id="div2">Div número 2</div>
</body>
Is it possible to indicate in some way CSS
that passing over div
number 1 changes the color of div
number 2 or vice versa?
Trying, out of sheer academic interest and stubbornness, I refused to believe that there wasn't a way to do what you need. And broadly speaking there is no way to select a previous element in CSS but I came up with a trick to make it look like you are doing it in this specific case.
Wrapping your two
<div>
with another one, we can select the<div>
one in which a is being madehover
and within this look for the<div>
one that is not being made ahover
and apply the color change to that one.Short answer: You can't because being at the same level and declaring the hover property in a div you can only apply styles to what is at a lower level than said div
Extended Answer: You can do it via JavaScript by assigning a class to your div2 when hovering on your div1 and vice versa: