id:hover id in css ? is it possible? - html

Question

Here is my html code
<div id="id_1"></div>
<div id="id_2"></div>
<div id="id_3"></div>
<div id="id_4"></div>
And here is my css code
<style>
#id_1:hover #id_2{background-color:red;}
#id_1:hover #id_3{background-color:red;}
#id_1:hover #id_4{background-color:red;}
#id_2:hover #id_4{background-color:red;}
</style>
This hover is why not working ? Someone help me ?
I need when i hover #id_1, will change backgroundcolor #id_2

Answer 1

Because those divs are siblings so you need to use general sibling selector or ~
#id_1:hover ~ div
This will match all sibling elements of #id_1 with type of div, and you can use that instead of writing separate selector for each div
#id_2:hover ~ #id_4
This will match only sibling element of id_2 that has #id_4, if you only want to match div you can add div#id_4
#id_1:hover ~ div {
background-color: red;
}
#id_2:hover ~ #id_4 {
background-color: red;
}
<div id="id_1">div</div>
<div id="id_2">div</div>
<div id="id_3">div</div>
<div id="id_4">div</div>
If you just want to change color of next sibling element when you hover over #id_1 you can use adjacent sibling selector or +
#id_1:hover + div {
background-color: red;
}
<div id="id_1">div</div>
<div id="id_2">div</div>
<div id="id_3">div</div>
<div id="id_4">div</div>

Answer 2

You can use CSS attribute selector. More specifically, [attr^=value] which
Represents elements with an attribute name of attr whose value is
prefixed (preceded) by value.
and in your case it would be div[id^='id_']:hover.
As an example adapted from Andrzej Gorgoń
div {
background: red;
width: 50px;
height: 100px;
float: left;
margin-right: 5px;
}
div[id^='id_']:hover {
background: blue;
}
<div id="id_1"></div>
<div id="id_2"></div>
<div id="id_3"></div>
<div id="id_4"></div>

Answer 3

This selector:
element1 element2
Works when element2 is child of element1
Your css is true when the #id_2 is a child of #id_1
You can change your code to this:
#id_1:hover + div{background-color: red;}