Pure CSS "div rollovers"

[Kanuf]

On a page I am designing, I'm trying to create a "div rollover".
Basically, I want a div's contents to change (or a new div to replace
the old one) via hover.

I have tried this, but it doesn't seem to work.
[HTML]
[div id="nohover"]
TEXT and IMAGE
[/div]
[div id="hover"]
Different TEXT and IMAGE
[/div]

[CSS]
div #nohover {
position: absolute;
top: 20px;
left: 20px;
width: 70px;
height: 70px;
z-index: 10;
}
div #nohover:hover {
visibility: hidden;
}
div #hover {
visibility: hidden;
position: absolute;
top: 20px;
left: 20px;
width: 70px;
height: 70px;
z-index: 11;
}
div #hover:hover {
visibility: visible;
}

I think this doesn't work because hover doesn't pass through to the div
below. And I'm also not about to cover up the text with a bgcolor or
image, because there's some transparencies to work with. This would be a
similar effect to the simple image rollovers, but with entire divs.

I'd love to get this to work with CSS and HTML only, and I gave up
caring for compatability with MSIE a long long time ago. If it works in
Mozilla, It'd be great.

It'd be great if anyone can help,
--Kanuf

[Tom Joyce]

Also sprach Kanuf <ca****@rogers.com>:

} On a page I am designing, I'm trying to create a "div rollover".
} Basically, I want a div's contents to change (or a new div to replace
} the old one) via hover.

Would something like:

<div id="foo>
<div id="hover">
stuff
</div>

<div id="not">
other stuff
</div>
</div>
#foo #hover {display: none;}

#foo.hover #hover {display: block;}

#foo.hover #not {display: none;}
do the trick?
--
yours aye,
Tom

You don't "watch" cricket as such, you enter a kind of meditative
state. For five days. It's very relaxing. - Tim Auton 2003-08-04

[Chris Morris]

Tom Joyce <t.*******@dunelm.org.uk> writes:

Also sprach Kanuf <ca****@rogers.com>:
} On a page I am designing, I'm trying to create a "div rollover".
} Basically, I want a div's contents to change (or a new div to replace
} the old one) via hover.

Would something like:

<div id="foo>
<div id="hover">
stuff
</div>

<div id="not">
other stuff
</div>
</div>
#foo #hover {display: none;}

#foo.hover #hover {display: block;}
#foo:hover, surely
#foo.hover #not {display: none;}

likewise

- works in Mozilla (1.4)

- doesn't work particularly well in Opera (7), on the first hover it
switches, but on unhover from then on neither is displayed,

- consistently displays #not in IE (6) and Konqueror (3).

Obviously in a non-CSS browser it just displays both.

I can see accessibility issues for this in a lot of situations, even
when it does work - combining Mozilla with a screen reader, for
instance.

--
Chris

[Tom Joyce]

Also sprach Chris Morris <c.********@durham.ac.uk>:

} > #foo.hover #hover {display: block;}
}
} #foo:hover, surely
8-P

Yes, you're quite correct of course.

--
yours aye,
Tom

You don't "watch" cricket as such, you enter a kind of meditative
state. For five days. It's very relaxing. - Tim Auton 2003-08-04

[Kanuf]

Tom Joyce wrote:

Also sprach Chris Morris <c.********@durham.ac.uk>:

} > #foo.hover #hover {display: block;}
}
} #foo:hover, surely

8-P

Yes, you're quite correct of course.

Thank you for the help, it worked perfectly.

--Kanuf