+ 11

Doubt in Code🥺 [SOLVED]

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

21st Mar 2021, 1:40 AM
Demi lune🌙
Demi lune🌙 - avatar
11 Respostas
+ 6
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
21st Mar 2021, 3:01 AM
John Doe
+ 6
XXX you need to also add on mouse out event. To make a "hover effect".
21st Mar 2021, 3:19 AM
Krish
Krish - avatar
+ 5
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)
21st Mar 2021, 2:10 AM
XXX
XXX - avatar
+ 4
with the current HTML code it is not possible using css. you would need to use javascript.
21st Mar 2021, 2:51 AM
John Doe
+ 3
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.
21st Mar 2021, 3:46 AM
XXX
XXX - avatar
+ 3
Use JavaScript.
22nd Mar 2021, 9:57 AM
Dushyant Kumar Tyagi
Dushyant Kumar Tyagi - avatar
+ 2
Hello Anshika😴🎶(✉🔒🔑🔨) ap ye kar sakte ho .a1:hover, .b1:hover apka kam ho jaya ga ye write Karne se
21st Mar 2021, 3:46 AM
MOHAMMAD AZMAL ALI
MOHAMMAD AZMAL ALI - avatar
+ 2
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
21st Mar 2021, 4:27 AM
Solo
Solo - avatar
+ 2
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.
22nd Mar 2021, 4:24 PM
Eddy M
+ 1
Can I do it with js?
21st Mar 2021, 8:24 AM
The INDIAN
The INDIAN - avatar
0
Привет
22nd Mar 2021, 7:11 AM
Антон
Антон - avatar