Javascript: highlighting text on mouse over.

[ItecKid]

Hello,

I am attempting to use JavaScript to 'highlight' text by changing it's background color:

<div id="foo" onMouseOver="highlight(this);"></div>

In JavaScript:

function highlight (word) {
document.getElementById (word.id).bgColor="blue";
}

This produces no effect. I also have an onClick event in the same div, can I not have onClick and onMouseOver together? Or am I doing something else wrong?

Thanks.

[harry010]

This might not be what you want, but can't you use the :hover pseudo class on a div to set the background color?

[almostbob]

function highlight(word) {document.getElementById (word).bgColor="blue";}

you will also require another javascript and an onmouseout() to reset the background or in short order everything will be blue
css is smaller faster and works when javascript is disabled for security reasons

.hl {background:#ffffff; }
.hl:hover { background:#0000ff; }

<span> this does not highlight on mouseover</span>
<span class='hl'> this does highlight on mouseover</span>

[ItecKid]

Thanks for the help guys, much easier than what I was trying to do. :) Marking solved.