Menu
Is it possible in CSS to change an element's content when hovered from a different element? Let's say for example, I have this divs A, B, C, D, E, F. I want to show some text in A when I hover in B. a different text will appear in A if I hover over in C. and the same goes for the rest. All the changes takes place in A when hovered in divs B to F.
215
Approach: This task can be accomplished by adding one element inside the other element & accordingly declaring the required CSS properties for the parent-child elements, so that whenever hovering outside the element then automatically the property of the inner element will change.
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
If #b is a descendant of #a , you can simply use #a:hover #b . ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.
Currently this is not possible with CSS only. You can adjust the styles of children or upcoming siblings. But you can't set the styles of previous siblings or parent elements.
So regarding your case you could do:
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
CSS
/* next sibling only */
div.a:hover + div.b { /* styles for b when hovering a */ }
/* general sibling selector */
div.a:hover ~ div.c { /* styles for c when hovering a */ }
div.b:hover ~ div.c { /* styles for c when hovering b */ }
You can't go the other way, from b to a for example.
Demo
Try before buy
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
