Hovering the mouse over an element changes its background color – Hover

by
Tiempo de lectura: < 1 minuto

Reading time: < 1 minute

I’m going to show you a simple example with the “hover” event on an element.

It’s a rectangular container that acts as an interactive element. When the “hover” event (mouse pointer passes over) occurs, its background color changes. Additionally, its size or scale is modified.

The HTML code is as follows:

<html>
<head>
  <title>Basic Example for DevCodeLight</title>
</head>
<body>
  <div class="box">
    <div class="content">Hover here</div>
  </div>
</body>
</html>

To style the rectangular container, you need to add the following CSS:

<style>
    /* CSS Styles */
    .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>

Now, to make the element interactive, you add the JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Basic Example for DevCodeLight</title>
  <style>
    /* CSS Styles */
    .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">Hover here</div>
  </div>

  <script>
    // JavaScript Functionality
    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>

Finally, I present the result of the example:

I hope this is helpful. Have a great day!

Post Views: 3

Leave a Comment