Setting className with javascript not working on hover

[Darghon]

Hi, I'm building a table with javascript, and i'd like to add a class to the cells,

Adding the class itself works, but if I add an css even like :hover, it refuses to work

 

is there any way to get this to work, without adding onmouseover and onmouseoff events to the cell?

 

The style I want to call is =>

<style>
.myClass:hover{
	background-color:#00cc00;
	border:0px;
	filter:alpha(opacity=25);
	-moz-opacity:.25;
	opacity:.25;
}
</style>

the code building the table is:

var table = document.createElement("table");
	table.style.borderCollapse="collapse";
	var rows = 15; //is loaded from an xml
	var cols = 15; //is loaded from an xml
	for(var i = 0;i < rows;i++){
		var row = table.appendChild(document.createElement("tr"));
		for(var j = 0;j < cols;j++){
			var cell = row.appendChild(document.createElement("td"));
			cell.style.width = "32px";
			cell.style.height = "32px";
			cell.style.margin = "0px";
			cell.style.padding = "0px";
			cell.title = "("+(i+1)+", "+(j+1)+")";
			cell.className = "myClass";
		}
	}

 

what should I do

[KevinM1]

Are you using a doctype at all?  IIRC, the :hover pseudo-element won't work in IE unless you're using a strict doctype.  The same may be true of Mozilla browsers as well.

[bibby]

This appears to work if you include the tagname also

td.myClass:hover

[roopurt18]

IIRC you also have the fact that not all CSS events are supported by all tags.  I could be wrong though.