html - 增加按钮的可点击区域

Question

不是在寻找任何实际代码，只是在正确的方向上寻找这一点。

有没有办法增加按钮的目标区域但不增加它的大小？例如，我是否可以在按钮周围有效地添加一个 5-10 像素的区域，该区域仍然算作单击按钮。

我见过的所有方法都会增加按钮的实际大小，但我不想这样做，因为这会将其他元素推到不合适的位置。我唯一的其他想法是为任何可以确定最接近的可点击元素的点击设置一个监听器，如果它在 5-10 像素以内，则触发它。

Answer 1

您可以添加一个伪元素(:after/:before)，但要小心，因为两个附近的链接可能会以这种方式重叠..

<a href="your-link-here" class="big-link">some link text</a>

和

a.big-link{position:relative;}
a.big-link:before{
    position:absolute;
    content:'';
    top:-10px;
    right:-10px;
    left:-10px;
    bottom:-10px;
}

演示:

a {
  position: relative;
  z-index: 50;
}

a:before {
  position: absolute;
  content: '';
  top: -10px;
  right: -10px;
  left: -10px;
  bottom: -10px;
  outline: 1px solid red;
  z-index: 40;
}

This is some text <a href="#">with a link</a> and <br> other stuff to check if they get pushed around<br> by the size of the link.