Display hidden css classes

Question

How to display hidden css classes on hover

<a class="a1">Show the first</a>
<a class="a2">Show the second</a>

<div class="div1">The first</div>
<div class="div2">The second</div>

I think it's clear

thanks!

Sorry but no, it's not clear. What is supposed to be hidden? What will be hovered? And where are the classes? — bfavaretto, Sep 17 '13 at 22:28
possible duplicate of [How to show hidden divs on mouseover?](http://stackoverflow.com/questions/2707100/how-to-show-hidden-divs-on-mouseover) — Ryan, Sep 17 '13 at 22:30
@Ryan, not really: this one specifies *only* [tag:css], not [tag:javascript]. — David Thomas, Sep 17 '13 at 22:31
If you can move the divs between the ``s, Mite Mitrski's answer should work. — bfavaretto, Sep 17 '13 at 22:36

score 2 · Answer 1 · answered Sep 17 '13 at 22:33

2

A CSS only option would be to have 2 classes and with one you hide the div element as with the others you display it using the pseudo selector :hover

div {
    display: none;
}

a:hover + div {
    display: block;
}

answered Sep 17 '13 at 22:33

Mite Mitreski

3,596
3
29
39

I believe you managed to understand the question. You should just mention that this solution requires the html to be changed, it should be a + div, then a + div (not a + a then div + div). – bfavaretto Sep 17 '13 at 22:36
@bfavaretto I don't want to change the html – Ahmed Sep 17 '13 at 22:41
@Mite Mitresk It works only if I changed the html but i don't want to – Ahmed Sep 17 '13 at 22:41
@Ahmed Added an answer, there's a similar selector that does the job. – bfavaretto Sep 17 '13 at 22:50

score 1 · Answer 2 · answered Sep 17 '13 at 22:49

1

You can use the general sibling selector:

div { display: none; }
.a1:hover ~ .div1 { display: block; }
.a2:hover ~ .div2 { display: block; }

http://jsfiddle.net/uK8KP/

answered Sep 17 '13 at 22:49

bfavaretto

71,580
16
111
150

thanks, what about IE is there a way with javascript? – Ahmed Sep 17 '13 at 23:08
This is supposed to work on IE7+, according to MDN. – bfavaretto Sep 17 '13 at 23:10
My mistake I tried it in IE10 with a local page -that's why it hasn't worked- – Ahmed Sep 17 '13 at 23:18
@bfavaretto this looks more complete to me – Mite Mitreski Sep 17 '13 at 23:18

Display hidden css classes

2 Answers2