css - react cursor none 无法适应

Question

我正在使用 react 和 next.js。
我想使用 cursor: none 来隐藏指针。
我使用了 cursor: none ，但它并没有隐藏它。

const Home: FunctionComponent = () => {
  const [mouseX, setMouseX] = useState(0);
  const [mouseY, setMouseY] = useState(0);
  const Mouse = (e: any) => {
    setMouseX(e.clientX);
    setMouseY(e.clientY);
  };

  return (
    <>
      <div
        style={{
          position: 'absolute',
          top: mouseY,
          left: mouseX,
          height: '20px',
          width: '20px',
          background: 'linear-gradient(to right, #aed0ee 0%, #00f2fe 100%)',
          cursor: 'none',
        }}
      ></div>
      <div
        style={{ width: '1000px', height: '1000px' }}
        onMouseMove={(e) => Mouse(e)}
      ></div>
    </>
  );
};

export default Home;

标签： cssreactjsnext.js

Answer 1

在您的目标元素中，您可以指定：

style={{
  "&:hover": {
    cursor: "none"
  }
}}