5 replies [Last post]
Locoboy
Offline
newbie
Last seen: 14 years 8 weeks ago
Joined: 2005-09-18
Posts: 3
Points: 0

I've got two DIV boxes above of eachother (absolute positioned). The one beneath contains a greyed out version, and the one above contains a roll-over link (fully css, no Javascript)

This construction is used 3 times on my page.

What i want to do isthe following:
If a user clicks on the first botton, it will dissapear so the greyed out version (the div below) is visible (and not clickable). The other have to remain visibile.
If the user clicks on the second button (elsewhere on the page) THAT button will dissapear (so the greyed out version below will be visible will show), and all other will become visibile.

Is this possible using only CSS (no javascript: bluh)
(http://www.wastedtalent.nl/Test is the site i'm working on, the question is about the buttons on the right)

Any help will be appreciated!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 15 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

(in)Visibility on click

CSS has a :hover pseudo class which is similar to the javascript onmouseover event handler and :active which is loosely equivalent to (while onmousedown). There is no equivalent to onclick. And no matter, as css cannot affect DOM elements. To get what you're describing will require some javascript.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Locoboy
Offline
newbie
Last seen: 14 years 8 weeks ago
Joined: 2005-09-18
Posts: 3
Points: 0

(in)Visibility on click

thanks for your fast reply.

is it possible to code this in CSS:

on active link (by psuedo class): DIV box 1 and DIV box 2 are visible, and DIV box3 is invisible?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 15 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

(in)Visibility on click

No. The :active will apply only to the one selector. CSS is not a programming language. A css ruleset simply says this [selector] has this set of property/value pairs.The conditions of one selector cannot affect another selector except through the cascade or inheritance. And before you ask, Wink the descendant of a hidden or not displayed element cannot be made visible or made to display.

Thee three legs of dynamic html (dhtml) are html/css, the DOM, and javascript. Javascript is the behavioral leg.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Locoboy
Offline
newbie
Last seen: 14 years 8 weeks ago
Joined: 2005-09-18
Posts: 3
Points: 0

(in)Visibility on click

bummer, i wanted to avoid javascript for compatibility reasons.

I'll try to accomplish it by PHP then.

thanks!

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 12 years 39 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

(in)Visibility on click

a:active (only for IE), which is the onclick, onkeypress equivelent only works on anchors. On other elements you're out of luck unless you use scripting.

It's a shame, we could do so much cool stuff if we could apply a:hover and a:focus to divs, headings, paragraphs and whatnot. We wouldn't need a:active then.

Maybe something this page could help. Tab onto the page using your keyboard, tab, tab, tab. This hides the elements using CSS and off-screen positioning. Could you get something like that to work for you... getting creative and all that? No scripting's involved.

That said, on this page uses javascript to give the form fields focus (and hover on this site) for IE only. For the rest of the browsers out there it's CSS-powered only.

Mike