Question 297385 in CSS Question posted in
Some basic documentation can be found here.

How do I change the pointer icon when clicking a button on CSS/React?

I’m working on a cursor button for a website that changes the style of the cursor whenever the button is active (I’m using an svg file). Right now I have it to where it changes the style of the cursor, however whenever I hover over a button it uses the default pointer.

Is there any way I can make the pointer have a different style as well when the button is on, so that whenever they hover over something clickable the pointer matches the cursor?

This is what I’m using for the cursor function

useEffect(() => {

console.log('Cursor icon:', cursorIcon); // Log the cursor icon

    const body = document.body;

        if (isCursorButtonPressed) {

            body.style.cursor = `url(${cursorIcon}), auto`;

    } else {

        body.style.cursor = 'auto';

    }

}, [isCursorButtonPressed, cursorIcon]);

and then I just call it on the css file as

.cursor-button.active {

    cursor: url('${cursorIcon}'), auto;

}
Tags:

2

Answers


  1. 0

    Dynamically add a class to the body when the button is pressed and use that class in your CSS selector.

    useEffect(() => {
    const body = document.body;

    if (isCursorButtonPressed) {
        body.style.cursor = `url(${cursorIcon}), auto`;
        body.classList.add('custom-cursor');
    } else {
        body.style.cursor = 'auto';
        body.classList.remove('custom-cursor');
    }
}, [isCursorButtonPressed, cursorIcon]);

    CSS

    body.custom-cursor button:active {
    cursor: url('${cursorIcon}'), auto;
}

    If you have many custom cursor buttons. Give unique name to each custom cursor class.

    Login or Signup to reply.
  2. 0

    Here is my solution.

    Two points to note

    1. Do not allow (the end user) to update the custom cursor value in the database, since the end users can execute malicious code and it will become a security vulnerability.
    2. Preferably do this in the top level root component

    code

    import React from 'react';
import './style.css';

export default function App() {
  const [isCursorButtonPressed, isCursorButtonPressedChanged] =
    React.useState(null);
  React.useEffect(() => {
    const body = document.body;

    if (isCursorButtonPressed) {
      body.style.cursor = `url(${isCursorButtonPressed}), auto`;
    } else {
      body.style.cursor = 'auto';
    }
  }, [isCursorButtonPressed]);

  const changeCursor = () => {
    console.log('test');
    if (isCursorButtonPressed === 'auto') {
      isCursorButtonPressedChanged('auto');
    } else {
      isCursorButtonPressedChanged(
        'url("https://via.placeholder.com/20"), auto'
      );
    }
  };
  return (
    <div>
      {isCursorButtonPressed}
      <style>
        {`body a, body button {
          cursor: ${isCursorButtonPressed} !important;
        }`}
      </style>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <button onClick={changeCursor.bind(this)}>change cursor</button>
      <button>test</button>
      <a href="#">test</a>
    </div>
  );
}

    stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search