e.clientX - rect.left returns 假值 // vanilla JS

Question

我目前正在构建一个按钮，它悬停在其渐变中。一切正常，除了渐变的位置，它应该由 e.clientX - rect.left 返回。将按钮悬停在其左边缘，结果为 0%（完美！）。但是将它悬停在右边缘，returns 大约 150%。

非常感谢您的帮助！

let btn = document.getElementById("btn");

btn.onmousemove = function (e) {
  let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  btn.style.setProperty("--x", x + "%");
};

:root {
  --x: 0%;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

.wrapper {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 75px);
}

button {
  height: 50px;
  min-height: 50px;
  min-width: 150px;
  border: none;
  position: relative;

  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) 100%
  );

  color: white;

  border-radius: 10px;

  padding: 0;
}

button:hover {
  background: none;
  cursor: pointer;
}

button::after {
  content: "";
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) var(--x),
    rgba(7, 22, 103, 1) 100%
  );

  height: 100%;
  width: 100%;
  border-radius: 10px;

  top: 0;
  left: 0;

  display: none;
  z-index: -1;
}

button:hover::after {
  display: inline;
}

span {
  margin: 0 30px;
}

  
    <link
      href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans&display=swap"
      rel="stylesheet"
    />
    
    <div class="wrapper">
      <button id="btn"><span>Click here</span></button>
    </div>

Answer 1

在检索像素值时，请勿在 css 中使用 %，请使用 px

let btn = document.getElementById("btn");


btn.onmousemove = function (e) {
  let rect = e.target.getBoundingClientRect();

  let x = e.clientX - rect.left;
  btn.style.setProperty("--x", x + "px");
};

:root {
  --x: 0%;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

.wrapper {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 75px);
}

button {
  height: 50px;
  min-height: 50px;
  min-width: 150px;
  border: none;
  position: relative;

  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) 100%
  );
 
  color: white;

  border-radius: 10px;

  padding: 0;
}
button span { width:100%; }
button:hover {
  background: none;
  cursor: pointer;
}

button::after {
  content: "";
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) var(--x),
    rgba(7, 22, 103, 1) 100%
  );

  height: 100%;
  width: 100%;
  border-radius: 10px;

  top: 0;
  left: 0;

  display: none;
  z-index: -1;
}

button:hover::after {
  display: inline;
}

span {
  margin: 0 30px;
}

  
    <link
      href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans&display=swap"
      rel="stylesheet"
    />
    
    <div class="wrapper">
      <button id="btn">Click here</button>
    </div>

Answer 2

完成悬停 - 现在最后跟踪的光标位置也将被保存。

let btn = document.getElementById("btn");

btn.onmousemove = function (e) {
  let rect = e.target.getBoundingClientRect();

  let x = e.clientX - rect.left;
  btn.style.setProperty("--x", x + "px");
};

:root {
  --x: 0%;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

.wrapper {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 75px);
}

button {
  height: 50px;
  min-height: 50px;
  min-width: 150px;
  border: none;
  position: relative;

  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) var(--x),
    rgba(7, 22, 103, 1) 100%
  );

  color: white;

  border-radius: 10px;

  padding: 0;
}

<link
      href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans&display=swap"
      rel="stylesheet"
    />

<div class="wrapper">
      <button id="btn">Click here</button>
    </div>

e.clientX - rect.left returns 假值 // vanilla JS

e.clientX - rect.left returns false value // vanilla JS

javascript

hover

onmousemove