Div不跟随鼠标

Question

在下面的代码中，我希望我的div会在红色背景下跟随我的鼠标但是它没有，这是什么原因？

CSS

.dropdown1 {
  position: absolute;
  left: 150px;
  top: 10px;
  background: #2b4557;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
}

JSX

import "./styles.css";
import { useRef } from "react";

export default function App() {
  const descBox = useRef(null);
  const handleMove = (e) => {
    console.log(e.clientX, e.clientY);
    descBox.current.style.left = e.clientX;
    descBox.current.style.top = e.clientY;
  };
  return (
    <div
      onMouseMove={handleMove}
      style={{ height: "300px", width: "100%", backgroundColor: "red" }}
    >
      <div className="dropdown1" ref={descBox}>
        123asdfsfdafffasdfasfdsajkj
      </div>
    </div>
  );
}

请运行Codesandbox中的代码

这是截图：

Answer 1

兄弟你忘了单位

descBox.current.style.left = `${e.clientX}px`;
descBox.current.style.top = `${e.clientY}px`;

Div不跟随鼠标

Div does not follow the mouse

html

javascript

css

jsx

reactjs