Closed Thread Icon

Topic awaiting preservation: switch css classes using js Pages that link to <a href="https://ozoneasylum.com/backlink?for=25355" title="Pages that link to Topic awaiting preservation: switch css classes using js" rel="nofollow" >Topic awaiting preservation: switch css classes using js\

 
Author Thread
GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

posted posted 03-28-2005 13:20

hello,
is something like this possible?

code:
<style>
.c1 { ... }
.c2 { ... }
</style>

<div class="c1" onmouseover="this.setstyle('c2')">



the setstyle function is something i'd like to have. what possibilities are there to assign a certain css-identifier to an element?
thanks!

jdauie
Bipolar (III) Inmate

From: Missoula, MT
Insane since: Jan 2003

posted posted 03-28-2005 14:17
code:
<div class="c1" onmouseover="this.style.className='c2';">

GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

posted posted 03-28-2005 14:47

hmmm, this doesnt work for me

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 03-28-2005 15:10

Should be just this.className = 'c2';

Note that className is actually a space-separated list of classes if the element has more than one class ("c1 c2 c3"), and this will override all of them unless you're careful to leave in the ones you don't want to change.


 

GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

posted posted 03-28-2005 15:42

thanks slime.

reisio
Bipolar (III) Inmate

From: Florida
Insane since: Mar 2005

posted posted 03-28-2005 17:24

...:hover?

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 03-28-2005 17:47

browser support for hover on non-link elements is still pretty spotty isn't it?

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

posted posted 03-28-2005 18:41

I think so, DL. I think going with onmouseover and onmouseout is probably the safest for now.

: . . DHTML Slice Puzzle : . . .

GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

posted posted 03-28-2005 21:55

in my case hover alone isnt gonna work, cause i also use onclick="" to have the style stay the way it is, once you click on the element.

TwoD
Nervous Wreck (II) Inmate

From: Sweden
Insane since: Aug 2004

posted posted 03-29-2005 07:13

Hehe, this reminded me of when I tried to change the style of hundreds of div tags at the same time.

I first looped through them all and changed their style-attributes. That was a bit slow so I decided to see if it was possible to edit the actual stylesheet they all used insted.
It was possible but it was up to 50 times slower... and it doesn't always work, depending on which doctype declaration you have...

/TwoD

reisio
Bipolar (III) Inmate

From: Florida
Insane since: Mar 2005

posted posted 03-29-2005 14:45
quote:
DL-44 said:

browser support for hover on non-link elements is still pretty spotty isn't it?


For IE it is - but that's why you plop in a little JavaScript to fix :hover support, instead of just falling back to total JavaScript.
Here's one: http://www.hszk.bme.hu/~hj130/css/list_menu/hover/

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

posted posted 03-29-2005 17:08

But throwing in javascript defeats the benefit of an all css solution.

: . . DHTML Slice Puzzle : . . .

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 03-29-2005 19:05

Well they're already relying on JavaScript - IMO using JavaScript to 'fix' Internet Explorer while leaving well-developed browsers that support :hover on all elements to use "all css" is better than messing up what would if not for IE (and a desire to have compatibility for it) be perfect code.

« BackwardsOnwards »

Show Forum Drop Down Menu