How can I create a hover area that shows buttons on mouseover and keeps the cursor pointer over the buttons?

I'm working on a project where I have a hover area, and when the user hovers over it, I want some buttons to appear. I need these buttons to stay visible while the mouse is over them and make sure the cursor shows a pointer over the buttons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invisible Hover Area with Buttons</title>
    <style>
        /* The main element */
        .hover-target {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: lightblue;
            transition: background-color 0.3s;
        }

        /* Invisible hover area (larger than the target) */
        .hover-area {
            position: absolute;
            top: -100px;  /* 200px larger, half above the target */
            left: -100px;  /* 200px larger, half left of the target */
            width: 400px;  /* 200px larger than the target (width and height) */
            height: 400px;  /* 200px larger than the target (width and height) */
            background: transparent;  /* Invisible */
        }

        /* Button group - initially hidden */
        .button-group {
            display: none;
            position: absolute;
            top: 220px;
            left: 0;
        }

        .button-group button {
            margin: 5px;
            padding: 10px;
            background-color: lightcoral;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .button-group button:hover {
            background-color: coral;
        }
    </style>
</head>
<body>

    <div class="hover-target">
        <div class="hover-area"></div>
        Hover over this area (invisible area around the box).
        
        <!-- Button group (initially hidden) -->
        <div class="button-group">
            <button>Button 1</button>
            <button>Button 2</button>
            <button>Button 3</button>
        </div>
    </div>

    <script>
        // JavaScript to track hover and perform actions
        const hoverTarget = document.querySelector('.hover-target');
        const hoverArea = document.querySelector('.hover-area');
        const buttonGroup = document.querySelector('.button-group');

        // Function to trigger when hovering in the invisible area
        function handleHoverEnter() {
            hoverTarget.style.backgroundColor = 'lightgreen';  // Change color
            buttonGroup.style.display = 'block';  // Show the button group
            console.log('Hovered over the invisible area!');
        }

        function handleHoverLeave() {
            hoverTarget.style.backgroundColor = 'lightblue';  // Reset color
            buttonGroup.style.display = 'none';  // Hide the button group
            console.log('Left the invisible area.');
        }

        // Add event listeners to the invisible hover area
        hoverArea.addEventListener('mouseenter', handleHoverEnter);
        hoverArea.addEventListener('mouseleave', handleHoverLeave);
    </script>

</body>
</html>

The buttons are being shown when I hover over the hoverArea, but when I move the cursor over the buttons, they disappear, and I can’t click on them. I also want the cursor to change to a pointer when hovering over the buttons.

How can I make sure that:

The buttons stay visible when the mouse is over them. The cursor shows a pointer when hovering over the buttons. Any help would be greatly appreciated!

Solution

If you put the buttons inside the box and make sure there's no gap between the box and them, you can use CSS only:

/* The main element */
.hover-target {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: lightblue;
    transition: background-color 0.3s;
}

.button-group {
    display: none;
    position: absolute;
    top: 200px;
    width: 100%;
    padding-top:20px;
    left: 0;
}

.hover-target:hover .button-group{
    display:block;
}


.button-group button {
    margin: 5px;
    padding: 10px;
    background-color: lightcoral;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button-group button:hover {
    background-color: coral;
}

    <div class="hover-target">
        <div class="button-group">
            <button>Button 1</button>
            <button>Button 2</button>
            <button>Button 3</button>
        </div>

      Hover over this area (invisible area around the box).
        
    </div>