How can I make the area around a button also clickable?

Question

If the mouse is about 20px close to the button, I want that the button should be clickable. I tried increasing the width of the button by 20px and making the opacity 0.1 so the big size won't show. Then in the button:hover rule I made the opacity 1.

I did the above cause I don't really know how go about it.

a trnasparent pseudo element with inset: -20px (I have to find the duplicate) — Temani Afif, Nov 10 '22 at 14:00

score -1 · Answer 1 · edited Jan 30 '23 at 20:53

$(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>

score -1 · Accepted Answer · answered Nov 10 '22 at 14:17

Using vanilla 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>

How can I make the area around a button also clickable?

2 Answers2