增加CSS圆圈的悬停区域[重复]答案

【问题标题】：Increasing hover area of CSS circle [duplicate]增加CSS圆圈的悬停区域[重复]
【发布时间】：2016-01-11 02:32:58
【问题描述】：

我有一个页面，其中包含小元素，边框半径设置为 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;
}

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

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

将border 设置为2px solid transparent 只会使我的测试中的圆圈变大，而CSS outline 不会产生:hover 状态或mouseenter 事件。

【问题讨论】：

标签： html css

【解决方案1】：

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

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;
}

&lt;div class="star"&gt;&lt;/div&gt;

【讨论】：

不是:before，而是::before，因为它是伪元素，不是伪类
我是老派...两种语法都受支持，但都可以。
其实IE8不支持::before
我不惜一切代价避免使用双 :: 因为它只是令人困惑并且不需要任何地方（输入占位符文本目前是一个例外）。
仍有 1.18% 的浏览器使用率：P

【解决方案2】：

试试这个：

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

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

&lt;div class="star"&gt;&lt;/div&gt;

增加的内边距会给你更大的命中边距。

【讨论】：

好答案！需要注意的是，background-clip 属性也将解决 OP 原始意图的问题（添加透明边框，而不是添加填充）

【解决方案3】：

您的透明边框方法很好，并且在所有浏览器中效果最好；）只需添加：

background-clip: padding-box;

确保背景不显示在边框下方。

【讨论】：

【解决方案4】：

在每个星星下添加一个圆圈并给它一个黑色背景ex;

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

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

 .startWrapper{
         position:absolute;
         background:#000;
         width:8px;
         height:8px;
         border-radius: 50%;}

【讨论】：

肉眼看到的星星数量约为 5,000，您的解决方案将需要的 DOM 元素数量增加一倍。我认为浏览器不会对此感到满意。
伪元素方法以非常低的成本做到这一点；）
问题没有提到星星的数量，正如@GCyrillus 所说的伪元素可以低成本解决问题。