I have a couple of html links, that I have onmouseover and onmouseout set to change colors, what I want to be able to do is when I click one of the links, the links is set to a certain color and mouse over effect no longer works on the clicked link but does on the others. these links activate javascript functions but do not direct to another webpage.

Any ideas how I could do this?

<a href="javascript:void(0)" id="paint" onclick="slidedown(this)"  style="color:#FFF" onmouseover="this.style.color = '#FF6600'" onmouseout="this.style.color = '#FFF'"><font style="font-family:pirulen; font-size:12px; margin-left:10px; "><b>Painting</b></font></a>

this is one of my links as you can see I have onmouseover and onmouseout set.

I have a couple of html links, that I have onmouseover and onmouseout set to change colors, what I want to be able to do is when I click one of the links, the links is set to a certain color and mouse over effect no longer works on the clicked link but does on the others. these links activate javascript functions but do not direct to another webpage.

Any ideas how I could do this?

<a href="javascript:void(0)" id="paint" onclick="slidedown(this)"  style="color:#FFF" onmouseover="this.style.color = '#FF6600'" onmouseout="this.style.color = '#FFF'"><font style="font-family:pirulen; font-size:12px; margin-left:10px; "><b>Painting</b></font></a>

this is one of my links as you can see I have onmouseover and onmouseout set.

• javascript
• html
• css

Share Improve this question Follow asked Jan 18, 2012 at 15:16 user541597user541597 4,3651212 gold badges6262 silver badges8989 bronze badges 1

• post your current code, so others can make sure any answers will suit your needs – musefan Commented Jan 18, 2012 at 15:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Use this CSS to get the hover effect

a{
    color:#fff;
}
a:hover{
    color:#FF6600;
}
a.selected,a.selected:hover{
    color:#000000;
}

Now, on your function slidedown you can add a class .selected when you click on the link.

this.className = this.className + " selected";

You could add a certain styling class to your link when it is clicked which overwrites the other styling and suppresses the mouseover styling.

Apply the hover to a class and make a toogle that changes the link class when clicked, this way the hover will not be applied to the clicked link.