How to write a:hover in inline CSS?

Last Updated : 04 Dec, 2018

It is called pseudo-selector and used to select all the elements when the user move mouse over the elements. It can be used on all the element. A <!DOCTYPE html> element must be declared in the document to see the working of this selector in all the elements.

Example 1:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>a:hover in inline CSS</title> 
        <style> 
            h1 { 
                color:green; 
            } 
            body { 
                text-align:center; 
            } 
            a { 
                text-decoration:none; 
                color:green; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2>a:hover in inline CSS</h2> 
        <a href="#" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='green'" >GeeksforGeeks</a> 
    </body> 
</html>                     

Output:

Example 2: This example uses JavaScript to display a:hover content in CSS. The onmouseover and onmouseout event attribute is called to display the a:hover content.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>a:hover in inline CSS</title> 
        <style> 
            h1 { 
                color:green; 
            } 
            body { 
                text-align:center; 
            } 
            a { 
                text-decoration:none; 
                color:green; 
            } 
        </style> 
        <script> 
            function mouseover() { 
                document.getElementById("gfg").style.color = "red"; 
            } 
              
            function mouseout() { 
                document.getElementById("gfg").style.color = "green"; 
            } 
        </script> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2>a:hover in inline CSS</h2> 
        <a href = "#" id="gfg" onmouseover="mouseover()" 
        onmouseout="mouseout()">GeeksforGeeks</a> 
    </body> 
</html>                     

Output:

Supported Browsers: The browser supported by a:hover selector are listed below:

Apple Safari 3.1
Google Chrome 4.0
Firefox 2.0
Opera 9.6
Internet Explorer 7.0

My Personal Notes

Related Articles