HTML Element Style How to - Change the css style of a anchor after the mouse release using the :active pseudo class

Question

We would like to know how to change the css style of a anchor after the mouse release using the :active pseudo class.

Answer


<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style  type="text/css">
        div{<!--from ww  w. jav  a2  s . co m-->
            width:100px;
        }
        a:link{
            color:blue;
        }
        a:visited{
            color:yellow;
        }
        a:hover{
            color:green;
        }       
        a:active{
            color:red;
        }
        a:link > div{
            background-color:yellow;
        }
        a:visited > div{
            background-color:green;
        }
        a:hover > div{
            background-color:red;
        }       
        a:active > div{
            background-color:blue;
        }
    </style>
    </head>
    <body>
        <a href=""><div>Click</div></a>
    </body>
</html>

The code above is rendered as follows: