Как я могу создать область наказания, которая показывает кнопки на мыши и сохраняет указатель курсора над кнопками? ⇐ Javascript

[Anonymous]

Я работаю над проектом, где у меня есть область падения, и когда пользователь колеблется над ним, я хочу, чтобы некоторые кнопки появились. Мне нужны эти кнопки, чтобы оставаться видимыми, пока мышь над ними, и убедиться, что курсор показывает указатель на кнопки. class = "Snippet-Code">





Invisible Hover Area with Buttons

/* 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;
}





Hover over this area (invisible area around the box).



Button 1
Button 2
Button 3




// 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);



< /code>
< /div>
< /div>
< /p>
Кнопки отображаются, когда я навечу над Hoverarea, но когда я Переместите курсор на кнопки, они исчезают, и я не могу нажать на них. Я также хочу, чтобы курсор перешел на указатель при падении на кнопки. Мышь над ними.
Курсор показывает указатель при парке на кнопки.
Любая помощь будет очень оценена! < /p>

Подробнее здесь: https://stackoverflow.com/questions/794 ... s-the-curs