如何使按钮周围的区域也可点击？ [复制]答案

【问题标题】：How can I make the area around a button also clickable? [duplicate]如何使按钮周围的区域也可点击？ [复制]
【发布时间】：2023-01-31 04:53:33
【问题描述】：

如果鼠标距离按钮大约 20px，我希望按钮应该是可点击的。我尝试将按钮的宽度增加 20px，并将不透明度设置为 0.1，这样大尺寸就不会显示了。然后在 button:hover 规则中，我将不透明度设置为 1。

我做了上述因为我真的不知道该怎么做。

【问题讨论】：

带有插图的透明伪元素：-20px（我必须找到重复项）

标签： html css button mousehover

【解决方案1】：

使用香草 js：

document.getElementById("my-button").onclick = function (e) {
  e.stopPropagation();
  window.alert("here we go");
};

button {
  margin: 20px;
  cursor: pointer;
}

div {
  cursor: pointer;
  background: gray;
  width: fit-content;
}

body {
  background: gray;
}

<div onclick="document.getElementById('my-button').click()">
  <button id="my-button">Button</button>
</div>

【讨论】：

【解决方案2】：

$(function() {

  var $win = $(window); // or $box parent container
  var $box = $(".box");
  var $log = $(".log");

  $win.on("click.Bst", function(event) {
    if (
      $box.has(event.target).length == 0 //checks if descendants of $box was clicked
      &&
      !$box.is(event.target) //checks if the $box itself was clicked
    ) {
      $log.text("you clicked outside the box");
    } else {
      $log.text("you clicked inside the box");
    }
  });

});

body,
div,
p {
  margin: 0;
  padding: 0;
}

body {
  background-color: #d6d6d6;
}

.log {
  position: relative;
  top: 10px;
  left: 10px;
  color: #000;
}

.box {
  position: relative;
  top: 50px;
  left: 100px;
  width: 100px;
  height: 100px;
  font-size: 18px;
  text-align: center;
  color: white;
  background-color: #79abff;
}

.box p {
  color: black;
}

<p class="log">You clicked on: </p>
<div class="box">
  Click me
  <p>nested p</p>
</div>

【讨论】：