Al pasar el puntero del ratón por encima de un elemento cambiar su color de fondo – Hover

por
Tiempo de lectura: < 1 minuto

Voy a mostrar un ejemplo sencillo con el evento «hover» en un elemento.

Es un contenedor rectangular que actúa como un elemento interactivo. Cuando se realiza el evento de «hover» (puntero del mouse pasa por encima), cambia su color de fondo. Además modifico su tamaño o escala.

El código HTML es el siguiente:

<html>
<head>
  <title>Ejemplo básico para DevCodeLight</title>
</head>
<body>
  <div class="box">
    <div class="content">Haz hover aquí</div>
  </div>

</body>
</html>

Para dar estilo al contenedor rectangular hay que añadir el CSS que muestro a continuación

<style>
    /* Estilos CSS */
    .box {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      border: 1px solid gray;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    
    .box:hover {
      background-color: lightgreen;
    }
    
    .box .content {
      font-size: 24px;
      color: white;
      text-align: center;
      text-transform: uppercase;
    }
  </style>

Ahora para que el elemento sea interactivo, se añade el JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo básico para DevCodeLight</title>
  <style>
    /* Estilos CSS */
    .box {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      border: 1px solid gray;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    
    .box:hover {
      background-color: lightgreen;
    }
    
    .box .content {
      font-size: 24px;
      color: white;
      text-align: center;
      text-transform: uppercase;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="content">Haz hover aquí</div>
  </div>

  <script>
    // Funcionalidad JavaScript
    var box = document.querySelector('.box');

    box.addEventListener('mouseenter', function() {
      box.style.transform = 'scale(1.1)';
    });

    box.addEventListener('mouseleave', function() {
      box.style.transform = 'scale(1)';
    });
  </script>
</body>
</html>

Por último muestro el resultado del ejemplo:

Espero que les sirva de ayuda, que tengan un feliz día!

Post Views: 5

Deja un comentario