I want to show a clickable button over the mouse cursor, whenever the user hover's over an image.

Code I am using: codepen

const box = document.getElementById("box");

function movebox(e) {
  box.style.left = event.clientX - 20   'px';
  box.style.top = event.clientY - 20   'px';
  box.style.display = 'block';
}

function removebox() {
  box.style.display = 'none';
}

function click() {
  console.log("clicked")
}

#maindiv {
  border: 1px solid blue;
  padding: 1px;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  min-height: 100vh;
}

#maindiv img {
  max-width: 400px;
  max-height: 400px;
  object-fit: scale-down;
  border: 1px solid red;
}

#box {
  position: absolute;
  z-index: 100;
  display: none;
}

<!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script><div id="maindiv">
  <img src="https://images.unsplash.com/photo-1563884993747-a52423c68196?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" onm ousemove="movebox(event)" onm ouseout="removebox()" />
  <button id="box"  onclick="click()">click</button>
</div>

Problems: Getting unwanted blinking effect on button.

I have tried using the pointer-events: none property on button, but it also disables the onclick events.

CodePudding user response：

Your function can not be named "click" because when you call it you are calling the built in click method.

Updated your code to rely on CSS to show and hide the element. Added hove to the img and the button.

Fixed a bug where you did not account for scroll position.

const box = document.getElementById("box");

function movebox(e) {
  box.style.left = window.scrollX   event.clientX - 20   'px';
  box.style.top = window.scrollY    event.clientY - 20   'px';
}

function clickMe() {
  console.log("clicked")
}

#maindiv {
  border: 1px solid blue;
  padding: 1px;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  min-height: 100vh;
}

#maindiv img {
  max-width: 400px;
  max-height: 400px;
  object-fit: scale-down;
  border: 1px solid red;
}

#box {
  position: absolute;
  z-index: 100;
  display: none;
  transition: all .25s;
}

#maindiv img:hover   #box,
#box:hover
 {
display: block;
}

<!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script><div id="maindiv">
  <img src="https://images.unsplash.com/photo-1563884993747-a52423c68196?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" onm ousemove="movebox(event)" />
  <button id="box"  onclick="clickMe()">click</button>
</div>