CSS - A Hover


 CSS - A Hover

  • In CSS, the a: hover is used to specify an element when the user’s mouse point hover on it.

Sample Code :

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:hover
                {
                color: green;
                }
        </style>
    </head>
    <body>
        <p>
            <b>
            <a href="http://www.wikitechy.com/"target="_blank">
               Wikitechy</a>
            </b>
        </p>
    </body>
</html>


Code Explanation :


    Here a: hover is a link which will specify an element when the user’s mouse point hover on the term wikitechy.

    Indicating color property values as red in a: hover selector will change the color to red when the mouse pointer hovers on the term wikitechy. 

    href is the attribute which specifies the destination address.

    target="_blank" Opens the Link in new tab.

Output :


    The link wikitechy will appear as normal link in blue color and underlined which will be displayed in the browser window.


    When we place our mouse pointer on the term wikitechy, the link color changes from blue to red and appear without underlined. since we have mentioned the text-decoration property as none.

  • Clicking on the wikitechy link, it will open up the website wikitechy which is displayed below.