How To trigger Some Element With Css While Hovering On Another One....

Question

I have Tried Nesting But Its Not Working Code Is Below......

<div id ="wrap">

<div id ="king" ></div>
<div id ="queen"></div>
<div id ="army_general"></div>
<div id ="kings_advisor"></div>
<div id="best_assassinator"></div>

<div id = "side"></div>
</div>

#side:hover{
background-color: black;
/* opacity: 0.2; */
width: 1000px;
font-size: 60px;
}

#wrap:hover #side{
background-color: black;
opacity: 0.2;
width: 1000px;
font-size: 60px;
}

I want To Trigger Side Only Whenever I hover any of these.....

Answer 1

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

Answer 2

That is Correct Sir That's Was My Problem Thank You Very Much!!....😊

Answer 3

div:hover #side {
/*CSS rules*/
}

Answer 4

Can you explain?

Answer 5

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

Answer 6

Thanks Sir BroFar That nav helped me and There was a Problem in postion.

and This Is My Final Solution

https://code.sololearn.com/WH21OPpL65cE

Answer 7

You know what, paste the complete html and css on a code playground and send me the link let me debug it.

The styles here is incomplete.

Answer 8

Aditya revisit code

Answer 9

There is a problem in ur code... U didnot set any width to those element , So u cant actually hover them or touch them.... To effect the #side div....

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

Answer 10

I am again fail to explain.... 😯