长话短说，CSS 一个坑，一个 hack

Posted 2021-09-10 ssshooter

ts;dr

虽然很短但是还是不读的话可以归结为两句话

• CSS 的 overflow-x，overflow-y 的表现不一定如你所想
• 你可以使用伪元素较为方便地扩大元素 hover 的范围

overflow x&y

根据 W3 标准

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

overflow-x 和 overflow-y 如果你分别设置的话，其中一个是非 visible 的话，那么另一个绝不能是 visible，就算写了 visible 也会被处理为 auto。

参考链接

hover 扩大

如果你有一个 .dot-item，他很小，但是他又有 hover 效果，那么要用户 hover 到一个小点上显然体验十分不好。以下提供可以使用伪元素提供一个更大 hover 区域。

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

P.S.在元素有重叠时，注意 z-index 设置

参考链接