I have the background color of an element set in an external style sheet. I am trying to use javascript to change the background color of this element on mouseover. For some reason, the javascript will not override the css in the external style sheet.

My code is something like this:

styles.css:

#mydiv
{
  background-color:#FFFFCC;
}

mypage.html:

<div id="mydiv" onmouseover="style.backgroundColor='#FFFFFF';">
   div content
</div>

The mouseover works fine if I don't set the background-color in the style sheet.

How do I fix this?

onmouseover="style.backgroundColor = '#FFFFFF'" onmouseout="style.backgroundColor='#FFFFCC'"

Non-JS users will see an FFFFCC colored background and JS users will have a background color depending on state.

style.backgroundColor = '#whatevercolor' isn't overriding the background-color that is set in my style sheet

Try this.style.backgroundColor...sorry, just missed that part.

tried.

I've tried it about 5 different ways, including using prototype and setStyle()...no dice =/

function setColour(colCode,objID) {
document.getElementById(objID).style.backgroundCol or = "#" + colCode;
}


onmouse[event]="setColour('ffffcc',this.id)

should work

tried that too. Again, works as long as I don't set the background-color in the external sheet. I can set it with the htm style attribute and it gets overwritten just fine

There's got to be something else interfering then, Chris.

How about you post the page you're working on? Anything Hirst or I suggested should work.

No problem. I'll post some of my exact code. Have you tried these examples you have given? I've tested in FF and IE and no bueno.

snipped from my css file:

#new td
{
	background-color:#99CCFF;
}

snippet from my html template ({bgcolor} is either #efefef or #ffffff):

		<tr id="new" onmouseover="bgcolor(this,'#FFFFCC');" onmouseout="bgcolor(this,'{bgcolor}');">
			<td id="date">{date}</td>
			<td id="from">{from}</td>
			<td id="message">{message}</td>
			<td id="reply">--</td>
			<td id="delete"><input type="checkbox" name="d[]" value="{id}" /></td>
		</tr>

my js function bgcolor() ( i have tried writing this function with getElementById and many other different ways, this is just the most recent way i've tried ):

function bgcolor ( what, color )
{
	what.style.backgroundColor = color;
}

I will note again that if I don't use the stylesheet to set the background-color, this function works perfect.

ok, I just figured out what the problem was.

If I take the 'td' out of the style sheet, it works well enough.

#new
{
  background-color:#99CCFF;
}

I would like to know why it wasn't working w/ the 'td' in there though? Any ideas?

Originally Posted by bhgchris

ok, I just figured out what the problem was.

If I take the 'td' out of the style sheet, it works well enough.

#new
{
  background-color:#99CCFF;
}

I would like to know why it wasn't working w/ the 'td' in there though? Any ideas?

You defined a name and didn't use it.
#new td{...} != <tr="new"...>

As a general rule of thumb, don't use blank spaces in name definitions in any programming language.
Name it #newTD, #new_TD or something of the sort.