How can I use onmouseover to change text color

[andersond]

I want the text to change from gray to bright red when the mouse is moved over the name of our company. Here is the code that doesn't work. What do I need to change to make this work?

function mouseOver(){
    document.getElementById('unitedBrokers').style.font="size='2' face='Arial color='#FF0000'";
}// mouseOver()
 
function mouseOut(){
    document.getElementById('unitedBrokers').style.font="size='2' face='Arial color='#808080'";
}// mouseOut()
 
<a id="unitedBrokers" onmouseover="mouseOver()" onmouseout="mouseOut()" style="text-decoration: none">United Brokers Incorporated</a>
 

[Dormilich]

you are using Internet Explorer?

then you need the cross browser workaround addEvent() (there are different versions available, search via google and choose the one you like)

if you call mouseOver() not by Event Handler, "this" refers to the actual scope which is the window object and thus has no style property.

[andersond]

I still haven't been able to successfully get text to change colors when the mouse rolls over it. Here's what's not working now:

function turnRed(){
        document.getElementById('unitedBrokers').style.font.fontcolor="#FF0000";
}
function turnGray(){
        document.getElementById('unitedBrokers').style.font.fontColor="#808080";
}
    <a href="Jsvascript:void(0);"
    onmouseover="return turnRed();"
    onmouseout="return turnGray();"
    id="unitedBrokers" style="text-decoration: none" /><font color="#808080">United Brokers, Incorporated.</font></a>
 

I do get a different cursor (finger instead of i-beam) but there is no change in the text color. This seems like it should be extremely simple; but, I just can't get it to work.

[acoder]

The syntax is incorrect. What you need to set is style.color:

function turnRed(){
    document.getElementById('unitedBrokers').style.color="#FF0000";
}

See link.

PS. threads merged.

[andersond]

I made that change and it still does absolutely nothing. This is IE. That's all any of my agents use; so, if there is some change that needs to be made to use it in IE I need to know what those changes are.

[acoder]

Yes, two more problems:
1. "Jsvascript " is an invalid protocol. Either use "javascript :" or just use "#" or a valid URL as long as you return false onclick.

2. Remove the font declaration within the link.

Having said that, this could be done without using JavaScript.

[Provision]

You're looking at this in too much of a complex angle, it's just simple and you don't need so much code.

[Provision]

<script>
function turnRed(x)
{
unitedBrokers.style.color ="#ff0000";
}
</script>
<script>
function turnGrey(x)
{
unitedBrokers.style.color ="#808080";
}
</script>
 
<a id="unitedBrokers" onmouseover="turnRed()" onmouseout="turnGrey()" style="text-decoration: none">United Brokers Incorporated</a>

I've just tested this and it works

[Dormilich]

still, the CSS solution doesn‘t even require JS:

<a class="color-swap">…</a>

.color-swap {
  color: #888;
}
.color-swap:hover {
  color: #f00;
}

[Provision]

It still works, like he planned

[Dormilich]

even after 5 years …