468,291 Members | 1,423 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,291 developers. It's quick & easy.

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

Jul 20 '05 #1
4 53684
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
Jul 20 '05 #2
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
Jul 20 '05 #3
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
Jul 20 '05 #4
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

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by al | last post: by
5 posts views Thread by Thomas Hoheneder | last post: by
reply views Thread by Mel | last post: by
reply views Thread by Monisha | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.