CSS- hover on one div, effect on another (pls read description)

Question

Hey I have a query related to CSS.
I have a text in one div and when I hover on this text I want the effect on another div.
for example-
<div class= one>
hello, world! My name is Hitesh.
</div>

<div class = two>
<table>
<!--Table contents-->
</table>
</div>

When I hover on "my name is hitesh" in the div one, I want the table in Div Two to have a change in its color to blue..?

Answer 1

It's only possible to reference an element after another in the document flow (next siblings or child of next siblings): in your case, that's possible with the following css selector / rule:

div.one:hover + div.two > table {
color: blue;
}

or shorter and equivalent for your use case:

.one:hover + .two table { ... }

'x y' select any y element child of x (at any 'deep')
'x > y' select any y element direct child of x element
'x + y' select any y element next to any x element (without any other elements in between)

Answer 2

Oh, maybe don't you have tried all the combinations we could do with tricky css...

By taking the example you provided in your question, I've made a sligthly more extended structure to show some of the tricky effect you could do with css only:

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

Answer 3

If I were you I'd rather try onmouseover Event
https://www.w3schools.com/jsref/event_onmouseover.asp

Answer 4

*** typo corrected in previous post code (missing ':hover' pseudo selector in second shorter example) ***

Answer 5

visph my elements aren't arranged according to any of the required flow so I guess I'll need to use javascript, any articles that I can refer to for that?

Answer 6

If that's really not possible to arrange your structure to be compatible with the requirements, well, js is the only way remaining...

dozule already provided a link... I personally prefer mozilla developer network (mdn) as source:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseover
... but that's taste question ;)

You need to get reference to your targeted elements (the one wich will handle the mouseover events, and the one you want to apply an effect), and attach an event handler (to the first) as a function: it will be called when the event will happened, so you can do what you want with the second element inside the function...