To make a long story short, CSS is a pit, a hack

ts;dr

Even though it is short, if you still don’t read it, it can be boiled down to two sentences

• CSS overflow-x, overflow-y may not behave as you think
• You can use pseudo-elements to easily expand the hover range of elements

overflow x&y

According to W3 standard

as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip

If you set overflow-x and overflow-y separately, if one of them is non-visible, then the other must not be visible. Even if visible is written, it will be processed as auto.

Reference link

hover expand

If you have a .dot-item , it is very small, but it also has the hover effect, then it is obviously very bad for the user to hover to a small point. The following offers can use pseudo-elements to provide a larger hover area.

.dot-item:before{
  content:'';
  position:absolute;
  top:-300%; left:-300%;
  width:700%; height:700%;
  border-radius:50%;
}

PS When the elements overlap, pay attention to the z-index setting

Reference link

More css pits: https://ssshooter.com/2021-06-15-qipa-css/#overflow-xy