Preserve dropdown hover when circular button and dropdown are separated by a gap

Question

The main issue is caused by a button being circular. But I really want a circular button, which is leading to hovering problems! All I want is to have a circular button that when hovered-over will reveal another element below it, like a div or another a tag. These two elements are separated by a gap.

Then I should be able to move my mouse down and hover over the revealed element and click on it or whatever. But of course if you unhover the original then the other element will disappear, especially since there is a gap between the two elements. What is the best way to make it so that I can move my mouse from element 1 to element 2 without element 2 vanishing during mouse travel?

Ideally this shouldn't require JS.

I've created a basic setup for this so far to get started:

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


  button


hover info

Here's an explanation of an old solution attempt of mine:

My first solution to stop element 2 from vanishing upon downward movement of the mouse was to put an invisible hoverable element between elem 1 and 2 which would keep elem 2 active while the mouse moves down to it. And this would work great, IF all elements were rectangular. But my elem 1 is circular!

This means that there is literally one single pixel of contact between the middle hover buffer element and elem 1 because there are those circular "corner" gaps between elem 1 and the invisible middle element. So whenever you move your mouse down, you are still going to miss that middle hover element 99% of the time.

And you can't put it behind elem 1 either to fill in those circular "corners" because the circular element has a bounding box that you can only see in inspect element and this bbox prevents you from filling up those "corners" with an area that actually interacts with the mouse, therefore making this solution useless. It's quite confusing in my explanation but try it out if you manage to implement this "solution".

user_12821739 · Answer

The first solution to come to mind is wrapping the circular button into a parent div, which will be the div that will activate the hover effect. This way, you can add padding-bottom to imitate the gap look while still making the "gap area" trigger the hover effect. In the snippet below, I made the wrapper div have a red background so you can see how it works. If you remove the red background, it should function as intended.

https://codepen.io/xenvi/pen/yLONOEa

body {
  padding: 30px;
  height: 100vh;
}

.buttonWrapper {
  display: inline-block;
  margin-bottom: 40px;
  background: red;
}

#myBtn {
  background-color: grey;
  padding: 20px;
  border-radius: 50%;
}

#hoverInfo {
  display: none;
  background-color: green;
  width: 100px;
  height: 50px;
}

.buttonWrapper:hover+#hoverInfo,
#hoverInfo:hover {
  display: block;
}

.buttonWrapper:hover {
  margin: 0;
  padding-bottom: 40px;
}


  
  button
  


hover info

user_8620333 · Answer

You can solve this easily using a pseudo element that will make the hoverable area bigger and that you activate only on hover:

body {
  padding: 30px;
  height: 100vh;
}

#myBtn {
  background-color: grey;
  padding: 20px;
  border-radius: 50%;
  position:relative;
}
#myBtn:before {
   content:"";
   display:none;
   position:absolute;
   top:90%;
   left:0;
   right:0;
   height:28px;
}

#hoverInfo {
  display: none;
  margin-top: 40px;
  background-color: green;
  width: 100px;
  height: 50px;
}

#myBtn:hover::before {
  display:block;
  background:rgba(0,0,255,0.2); /* to illustrate */
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
  display: block;
}


  button


hover info

Preserve dropdown hover when circular button and dropdown are separated by a gap

2 Answers