¿Cómo escribir a: hover en CSS en línea?

Se llama pseudo-selector y se usa para seleccionar todos los elementos cuando el usuario mueve el mouse sobre los elementos. Se puede utilizar en todo el elemento. Se debe declarar un elemento <!DOCTYPE html> en el documento para ver el funcionamiento de este selector en todos los elementos. 

Ejemplo 1: 

html

<!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>                   

Producción:

  

Ejemplo 2: este ejemplo usa JavaScript para mostrar un: contenido flotante en CSS. Se llama al atributo de evento onmouseover y onmouseout para mostrar el contenido a:hover. 

html

<!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>                   

Producción:

  

Navegadores compatibles: los navegadores compatibles con un: selector de desplazamiento se enumeran a continuación:

  • Apple Safari 3.1
  • Google Chrome 4.0
  • Firefox 2.0
  • Ópera 9.6
  • Internet Explorer 7.0

CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *