5

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

 2 years ago
source link: https://segmentfault.com/a/1190000040129488
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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 设置

参考链接


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK