Doubt in Code🥺 [SOLVED]

Question

Searched the discussion forum questions before but didn't got the satisfactory answers to my doubt 😥

Here is my doubt:

I want that when i hover on a1, the background color of b1 also changes simultaneously but am unable to do so😥, please help me🥺🥺

Here is my try:

https://code.sololearn.com/WABB8Yd42R1Y/?ref=app

Answer 1

the code adds the class a1-hover to body when you hover over a1 and removes it again on mouse out

https://code.sololearn.com/W5038NYwCv6R/?ref=app

Answer 2

XXX you need to also add on mouse out event. To make a "hover effect".

Answer 3

First of all, the element with class b1 should be after the element with class a1 in the html code.
Secondly, the '+' is the *adjacent sibling* conbinator. It will only work when the elements are siblings. Currently in your code, a1 is NOT a sibling of b1.

I couldn't find a way to do it with elements that are at different levels in the DOM tree. So my suggestion would be to use JavaScript.
See John Doe 's answer

Of course, someone might have a pure CSS way to do this. I don't know much CSS (I literally got the information I shared above from a google search)

Answer 4

with the current HTML code it is not possible using css. you would need to use javascript.

Answer 5

Krish [less active] thanks for pointing out. I forgot about that. In that case, my solution would be the same as John Doe 's. So I'll remove my answer because John Doe has already given one.

Answer 6

Use JavaScript.

Answer 7

Hello Anshika😴🎶(✉🔒🔑🔨) ap ye kar sakte ho .a1:hover, .b1:hover apka kam ho jaya ga ye write Karne se

Answer 8

The operator "+" is valid only for a neighboring element and only in a direct sequence

<style>
.a1:hover + .b1 {
background-color: cyan;
}
</style>
<div class="a1">a1</div>
<div class="b1">b1</div>

https://code.sololearn.com/Wtnu13B8dPEC/?ref=app

Answer 9

Anshika😴🎶(✉🔒🔑🔨)

A css only _compromise_ could be to make a1 and b1 change color at the same time (while box and b2 are able to have a different color) when you hover over the box class, like this:

.box{
--a1b1-color: blue;
}

.box:hover{
--a1b1-color: cyan;
}

.b1{
background-color: var(--a1b1-color);
}

.b2{
background-color: red;
}

.a1{
background-color: var(--a1b1-color);
}

As @XXX pointed out, someone might have a pure css only _solution_ also. If you find one, please share.

Answer 10

Can I do it with js?

Answer 11

Привет