增加CSS圆圈的悬停区域

Question

我有一个页面，其中的小元素的 border-radius 设置为 50%，因此它们显示为小点：

CSS：

 .star {
    width: 5px;
    height: 5px;
    background-color: rgb(236, 236, 236);
    position: absolute;
    border-radius: 50%;
    transform: scale(1);
    display: block;
    transition: 0.25s ease-in background-color, 0.25s ease-in opacity, 0.25s ease-out transform;
    cursor: pointer;
}

其中每一个都有一个悬停动作，可以弹出一个特定的弹出窗口。然而，现在存在一个问题，即悬停（至少在我测试过的浏览器中）是一种寻找像素的游戏。

是否有一个“技巧”可以在点上添加一个不可见的边框，从而使它们在不寻找像素的情况下更具选择性？

Setting border to say 2px solid transparent just makes the circles bigger in my tests, and CSS outline does not produce a :hover state or mouseenter 事件。

原文由 cwj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个：

 .star {
    width: 10px;
    height: 10px;
    padding:10px;
    background:#000;
    border-radius:50%;
    background-clip:content-box; /* <- key point*/
}

.star:hover { background-color:#f00; }

 <div class="star"></div>

增加填充会给你更大的命中率。

原文由 c-smile 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用伪元素来增加“命中区域”

 body {
  background: #000;
}

.star {
  width: 5px;
  height: 5px;
  background-color: rgb(236, 236, 236);
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: scale(1);
  display: block;
  transition: 0.25s ease-in background-color, 0.25s ease-in opacity, 0.25s ease-out transform;
  cursor: pointer;
}

.star::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 500%;
  height: 500%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index:-1;
  border:1px solid green; /* for demo purposes */

}

.star:hover {
  background: #f00;
}

 <div class="star"></div>

原文由 Paulie_D 发布，翻译遵循 CC BY-SA 3.0 许可协议