[sclug] Re: For wednesdays meeting

[Jonathan Leighton]

(I'm new to this list, which is why this reply isn't a "real" one.)

--- Start quote ---

(2) I'm having trouble with a bit of CSS/HTML, which someone would
probably know off-hand. I'm using CSS to colour alternate rows in a table,
but I'd like the mouse to highlight its row. This works:

 HTML:
	<TR class="ODD"
		onMouseOver="this.style.backgroundColor='#808080'"
		onMouseOut=...
	>

 CSS:
	TR.ODD {  background: #C0F090; }
	TR.EVEN {  background: #C0C0C0; }
	TR.CURR { ... }

but I want all colours to be in the CSS file. Something like: (These DONT work)

 HTML:
	<TR class="ODD" onMouseOver="this.styleclass='CURR'">

or better, with something in the CSS file

 HTML:
	<TR class="ODD">
 CSS:
	TR.ODD {
		background: #C0F090;
		onmouseover: "this.style.backgroundColor='#808080'"
		onclick: ...
	}	

So, how can I change the CLASS of an item in javascript/DOM,
or react to mouseover from CSS and change background colour?

--- End quote ---

You would do it using CSS pseudo-classes. Pseudo-classes are only 
"activated" when certain conditions are true, such as the element being 
rolled over, or clicked. The pseudo-class you're looking for here is 
":hover". This would work:

TR.ODD:hover {  background: #C0F090; }


However, it's worth noting that this won't work in Internet Explorer. 
For some strange reason, Microsoft believe that links are the only 
elements that can ever be hovered are links. In Internet Explorer 
"a:hover { ... }" is the only situation where the ":hover" pseudo-class 
actually works.

I'd suggest that Internet Explorer's terrible support for standards is 
not a reason to use JavaScript instead of CSS for the effect, as a 
different colour when trs are hovered is definitely not "core" 
functionality. But that's a judgement you have to make.

Hope that was some help.

Regards,
Jon

-- 
Jonathan Leighton aka. Turnip
http://turnipspatch.com/ | http://digital-proof.org/