Wie kann ich einen Schwebebereich erstellen, der Schaltflächen auf Mouseover anzeigt und den Cursorzeiger über den Taste ⇐ HTML

[Guest]

Ich arbeite an einem Projekt, in dem ich einen Schwebebereich habe und wenn der Benutzer darüber schwebt, möchte ich, dass einige Schaltflächen angezeigt werden. Ich brauche diese Schaltflächen, um sichtbar zu bleiben, während die Maus über sie ist, und stellen Sie sicher, dass der Cursor einen Zeiger über die Tasten zeigt. 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>
Die Schaltflächen werden angezeigt, wenn ich über die HoverArea schwebe, aber wenn ich bin Bewegen Sie den Cursor über die Tasten, sie verschwinden und ich kann nicht darauf klicken. Ich möchte auch, dass der Cursor beim Schwebe über die Tasten zu einem Zeiger wechselt. < /P>
Wie kann ich sicherstellen Die Maus ist über sie hinweg.>