Tutorialspoint.dev

How to write a:hover in inline CSS?

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter