Как написать: hover во встроенном CSS?

Опубликовано: 4 Февраля, 2022

Он называется псевдоселектором и используется для выбора всех элементов, когда пользователь наводит указатель мыши на элементы. Его можно использовать на всех элементах. В документе должен быть объявлен элемент <! DOCTYPE html>, чтобы увидеть работу этого селектора во всех элементах.

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>                    

Выход:

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>                    

Выход:

Поддерживаемые браузеры: браузеры, поддерживаемые селектором: hover, перечислены ниже:

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

Picked HTML CSS-Misc CSS

Как написать: hover во встроенном CSS?

РЕКОМЕНДУЕМЫЕ СТАТЬИ