Pure CSS "div rollovers"

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

re: Pure CSS "div rollovers"

Also sprach Kanuf <canwaf@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

re: Pure CSS "div rollovers"

Tom Joyce <t.m.joyce@dunelm.org.uk> writes:[color=blue]
> Also sprach Kanuf <canwaf@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;}[/color]

#foo:hover, surely
[color=blue]
> #foo.hover #not {display: none;}[/color]

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

re: Pure CSS "div rollovers"

Also sprach Chris Morris <c.i.morris@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

re: Pure CSS "div rollovers"

Tom Joyce wrote:[color=blue]
> Also sprach Chris Morris <c.i.morris@durham.ac.uk>:
>
> } > #foo.hover #hover {display: block;}
> }
> } #foo:hover, surely
>
> 8-P
>
> Yes, you're quite correct of course.[/color]

Thank you for the help, it worked perfectly.

--Kanuf