HTML | Evento DOM al pasar el mouse

El evento DOM onmouseover en HTML ocurre cuando el puntero del mouse se mueve sobre un elemento o sus elementos secundarios.
Etiquetas compatibles: admite todos los elementos HTML, EXCEPTO: 

  • <base>
  • <bdo>
  • <br>
  • <cabeza>
  • <html>
  • <iframe>
  •  <meta>
  • <parámetro>
  • <script>
  • <estilo>
  • <título>

Sintaxis: 
 

  • En HTML: 
     
<element onmouseover="myScript">
  • En JavaScript: 
     
object.onmouseover = function(){myScript};
  • En JavaScript, usando el método addEventListener(): 
     
object.addEventListener("mouseover", myScript);

Ejemplo: 
 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
      DOM onmouseover event
  </title>
</head>
 
<body>
    <center>
 
        <h1 id="hID">
          GeeksforGeeks
      </h1>
        <h2>
          HTML DOM onmouseover event
      </h2>
 
        <script>
            document.getElementById(
              "hID").addEventListener(
              "mouseover", over);
           
            document.getElementById(
              "hID").addEventListener(
              "mouseout", out);
 
            function over() {
                document.getElementById(
                  "hID").style.color = "green";
            }
 
            function out() {
                document.getElementById(
                  "hID").style.color = "black";
            }
        </script>
    </center>
</body>
 
</html>

Producción: 
 

Navegadores compatibles: los navegadores compatibles con el evento HTML DOM onmouseover se enumeran a continuación: 
 

  • Google Chrome
  • explorador de Internet
  • Firefox
  • safari de manzana
  • Ópera

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra 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 *