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.
3 Answers
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
answered Oct 1, 2013 at 16:27
insertusernamehere
23.7k10 gold badges93 silver badges130 bronze badges
3 Comments
Ruan Mendes
You could hack it with negative margins?
insertusernamehere
Of course, you can still style it to your needs, so that the last sibling will appear as the first, as @JuanMendes suggested.
This is possible using the general sibling selector ~ and by having a matching div to go with each of the hovered divs. This works in the latest version of all browsers. http://jsfiddle.net/s8uwu/
HTML
<div id="a">Hello A</div>
<div id="b">Hello B</div>
<div id="c">Hello C</div>
<div id="d">Hello D</div>
<div id="e">Hello E</div>
<div id="text">
<div class="a">From A</div>
<div class="b">From B</div>
<div class="c">From C</div>
<div class="d">From D</div>
<div class="e">From E</div>
</div>
CSS
#a:hover~#text .a,
#b:hover~#text .b,
#c:hover~#text .c,
#d:hover~#text .d,
#e:hover~#text .e{
display: block;
}
#text div{
display: none;
}
3 Comments
Harry
I posted a fiddle on similar lines in the comments (not accusing of copying, do not mistake). The only point is this approach will work if the text (like From A etc) is pre-defined. If not, setting a random text value into the div would be very challenging.
Ruan Mendes
@Harry where does it say that you need random text? The OP doesn't want a script, you have to store the text in your HTML, or in the CSS as insertusernamehere
Harry
The question isn't very clear on that. That is what I am trying to say. OP should clarify more on what some text means.
Simply from its name, CSS(Cascading Style Sheet) is only for applying style/appearance in a convenient way.
Hence it does not at all deal with the content of an web-page.
However You definitely can do it with the help of JavaScript as follows-
<div id="a" onmouseover="document.getElementById('b').innerHTML='ijkl';">abcd</div>
<div id="b">efgh</div>
6 Comments
Ruan Mendes
That's not the question though. CSS does let you do it, OP wants to know how
Rajesh Paul
@JuanMendes Your answer specify how to hide the contents but not how to change it. So you also dont give a solution to it...
Ruan Mendes
It gives the appearance of changing, that is surely good enough, since CSS deals with appearance
Rajesh Paul
@JuanMendes but he asked for how to change the content. Can you answer that??? It's not about good/bad but about what he is asking for. Even you r telling so...
Gibs
We weren't thought jQuery not until yesterday. Everything seems easy on jQuery but I want to find something out just using CSS :D My idea of how I can do it is assigning a variable that contains the text (the texts comes from a database). All are hidden under the Div A and will have the opacity put into 100 on hover :D
|
HTMLexample.