The main issue I'm facing is due to my insistence on having a circular button. Despite wanting this design choice, the circular shape is causing problems when it comes to hovering over the button.
I simply desire a circular <a> button that, when hovered over, will reveal another element below it, whether it be a div or another a tag. These two elements need to be separated by a gap.
I should be able to smoothly move my cursor downwards from the original button to the revealed element without the latter disappearing in between due to the gap separating them. Is there an effective way to achieve this transition without relying on JavaScript?
To kick things off, I've set up a basic structure:
body {
padding: 30px;
height: 100vh;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
}
#hoverInfo {
display: none;
margin-top: 40px;
background-color: green;
width: 100px;
height: 50px;
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
display: block;
}<a id="myBtn" href="/">
button
</a>
<a id="hoverInfo" href="/">hover info</a>Let me elaborate on a previous attempt at solving this dilemma:
My initial approach to prevent the vanishing of the second element upon downward cursor movement was to place an invisible hoverable element between elements 1 and 2. This intervening element would ensure that element 2 remains active as the mouse descends towards it. While this tactic would have been effective with all rectangular elements, element 1's circular shape threw a wrench in the plan!
The circular nature of element 1 meant there was only a tiny pixel-wide contact point between the middle hover buffer element and element 1. The circular "corner" gaps prevented proper interaction, making the solution ineffective most of the time.
Even placing the buffer element behind element 1 to fill the circular "corners" proved futile. The bounding box of the circular element thwarted attempts to create a functional area within those corners for mouse interaction, rendering the solution impractical. It may sound confusing, but give it a shot if you manage to implement this peculiar "solution."