Topic awaiting preservation: a:hover properties, accessible with javascript?

Hi,

I am working on a site with css rollovers, it all works fine but I wanted to add an extra feature - when you click on a link (which has css hover properties) those css hover propeties are changed so that now when you hover over the link the hover state is different to how it was before.

I would ideally like a proper way to access the css a:hover rather than just replacing it with an onmouseover event - is it possible?

visit my CryoKinesis Online Gallery

Would like to know also. Any chance you know how to make the a:hover different in different divs/tables using only css?

quote:

---

Any chance you know how to make the a:hover different in different divs/tables using only css?

---

Yes I do thank you.


...it is not a javascript issue either.


...I'm guessing you'd like to know how to do it huh?


It's simple, you basically have to specify thing like this:

table a:hover { //this will affect links in table only }

div a:hover { //this will affect links in divs only }

#myBox a:hover { //this will affect links in the element with the id 'myBox' only }

.myLinks a:hover { //this will affect links in an element with the class 'myLinks' only }

table.myLinks div#myBox a:hover { //this will affect links in a div with the id of 'myBox' that is contained within a table with the class of 'myLinks' }


I hope that has cleared it up for you, now back to my problem


visit my CryoKinesis Online Gallery

Only thing I can think of is a:visited or a:active .. look up other pseudo-states on anchor tags though, that'd be presumably where you may find what you're looking for.

You could alter the link's class.

<a href="#" class="initialClass"  onclick="this.className+=' additionnalClass'">blah</a>

You can manipulate the className property at will to make for instance a toggle behavior.

Hope that helps,

Mathieu "POÏ" HENRI

[This message has been edited by poi (edited 11-04-2003).]

thanks !