Change Hyperlink Text Color Onmouseover

JavaScript HyperLink Rollover effect to change the text color onmouseover functionality can be created by using JavaScript DOM methods and onmouseover event of HTML anchor a tag. You can call the JavaScript functions for changing the color onmouseover and onmouseout events. In this sample we have used to types of methods to change the font color of Hyperlink text.

1. inline method using JavaScript "this" object that acts as "document.getElementById" object reference.

2. javascript function that accepts 2 parameters as "this" object reference and color code that is to be applied on text.

JavaScript DOM Features Used

1. this object

2. style object

3. color property

Try the sample below to learn and practice the JavaScript DOM code for developing this functionality:

Edit this code and click update to view output

<html>
<head>
    <title>Javascript Change Hyperlink Text Color Onmouseover</title>
    
    <style type="text/css">
   
    a {
    font-weight:bold;
    font-family:verdana;
    text-decoration:none;
    }
   
    </style>
   
    <script type="text/javascript" language="javascript">
    function changeColor(idObj,colorObj)
    {
        document.getElementById(idObj.id).style.color = colorObj;
    }
    </script>

</head>

<body>

<a href="#" style="color: #000000" onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#000000'">
        Link 1</a>
    <br />
    <br />
    <a href="#" style="color: #999999" onmouseover="this.style.color='#008000'" onmouseout="this.style.color='#999999'">
        Link 2</a>
    <br />
    <br />
    <a href="#" style="color: #FF0000" onmouseover="this.style.color='blue'" onmouseout="this.style.color='#FF0000'">
        Link 3</a>
    <br />
    <br />
    <a id="lnk1" href="#" style="color: #008000" onmouseover="changeColor(this,'#FF0000');"
        onmouseout="changeColor(this,'#008000');">Link Color change using javascript function</a>

</body> 
</html>

OUTPUT:

Get Code for this sample...

Previous Sample

Next Sample