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 设置
更多 css 坑:https://ssshooter.com/2021-06...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。