Standards compliant DIV roll-overs?

[dantre]

I have a page with a bunch of divs with a roll-over effect using onMouseOver and onMouseOut. I also have an onMouseClick event.

Is there a way to do the roll-overs (and maybe the onClick) that will be viewable in most/all browsers?

I know Mozilla supports the :hover pseudo-class, but i believe they are the only ones.

I'd like to appease the great and wise W3C validator...

Thanks! -dan

Here's what I have so far...

-this creates a opacity roll-over effect that has been successfully tested in IE and Firefox, but should also work in Netscape, Opera, and hopefully Safari.

CSS:

.track {
cursor: pointer;
width: 331px;
height: 16px;
margin: 5px;
font-size: 11px;
text-align: left;
color: #000000;
border: 1px solid dimgray;
padding: 3px;
overflow: hidden;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

HTML:

<div class="test" onClick="getSimilar(this.innerHTML);" onMouseOver="this.filters.alpha.opacity=99;" onMouseOut="this.filters.alpha.opacity=60;">
test
</div>

 

[dantre]

oops, that css code should read ".test" not ".track"

 

[BabyJeffy]

As an aside... here is the block of filter code that I use in my text scrolling example (check my sig file for the link to my site):

.sixtyPercentOpaque {
	-khtml-opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}

The -khtml is for Safari (Konquerer base). The ticker shows opacity working in IE, FF, Netscape, Safari and Opera.

You might set them using JS with the following code:

this.style.KhtmlOpacity=0.6;
this.filters.alpha.opacity=60;
this.style.MozOpacity=0.6;
this.style.opacity=0.6;

Hope this is enough to get you well on the way!

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[BillyRayPreachersSon]

Opera, AFAIK, has NO opacity support - not even the latest version.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

OK... so I was a little keen on claiming Opera support. Well spotted, Dan

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]