View Full Version : Toggling Layer Visibility and CSS

Anthony D
02-22-2005, 06:42 PM

I am pretty sure the answer to this is "no", but could someone please confirm it for me. In toggling layer visibility, is there ANY way this can be done without using Javascript ie., through CSS only and avoiding any onClicks or onRollovers. Trying to make a particular site W3C compliant and the Javascript for layer toggling is breaking it.

Apprec. your input

02-22-2005, 06:57 PM
Hey, welcom to the forums

I don't know, but could you do something like:



if you get stuck on the hover, search the forum for "whatever :hover"


02-23-2005, 10:14 AM
The only behaviour-ish effect you can accomplish with CSS is with the :hover pseudoclass: you could toggle an element's visibility when hovering over its parent. For onclick effects, though, you're pretty much dependant on JavaScript.
If you can supply some more info, we might help with cooking something up.

Anthony D
02-23-2005, 12:56 PM
Hi guys,

Thanks for your quick replies. Basically what I am trying to achieve in detail is this:

I have 6 text links which I need layers to popup in an absolute position on the page upon rollover of the links. The 6 layers will appear in exactly the same spot but visibility will be determined by which link is "hovered".

Can this be done using just CSS or do we need to use Javascript to toggle the layer visibility.

Thanks again

02-23-2005, 01:22 PM
Hey Anthony,

You can use CSS pretty easily for this kind of effect... some time ago I typed this example up for another thread but I'm sure it might provide a springboard for you...


If you need additional help on the code or want to try another concept let me/us know. Hope this helps...

02-23-2005, 01:24 PM
This sort of thing can be accomplished entirely with CSS and the :hover pseudoclass, provided that you apply any of the available solutions to graft :hover functionality on other elements besides links for IE, which only supports :hover on links (Peter Nederlof's whatever:hover comes to mind).

Since it's semantically incorrect to have a elements contain anything but inline content, and you probably need some block level element for your "layer", you'll be looking at something like this:

<li><a href="#">The first link</a><p>Toggleable paragraph one.</p></li>
<li><a href="#">The second link</a><p>Toggleable paragraph two.</p></li>
Since you mentioned "a list of links", an unordered list seemed in order... :D

As both the link and the toggleable layer (in this example a paragraph; could be something else) are children of each list item, the following selectors:

li a {...}
li p {...}
li:hover a {...}
li:hover p {...}
can be used to set both the unhovered and the hovered states of the links and the paragraphs. For the paragraphs, the unhovered state could be "display: none;" (which takes the paragraph out of the normal flow altogether) and the hovered state would include something like:

li:hover p {
display: block;
position: absolute;
top: 0;
left: 0;
width: 10em;
(offset and width values completely arbitrary, of course).