Skip to content

Change cursor on hover - has no affect #129

Closed
Closed
Change cursor on hover - has no affect#129

Description

@newguy123-creator
newguy123-creator
opened on Nov 13, 2024
  • three version: 0.169.0
  • @react-three/fiber version: 8.17.10
  • react-three-map version: 0.8.2
  • node version: v20.11.1
  • npm (or yarn) version: 10.2.4

Problem description:

Usually I can easily add code to my model tag in my canvas to change the cursor to a pointer in a regular R3F app, however this doesnt seem to work in react-three-map. No matter what I do, the cursor stays the "grab" cursor.

Relevant code:

<Model
    position={[-3.855, 0, 180.526]}
    onClick={handleClick}
    onPointerEnter={() => {
        document.body.style.cursor = "pointer";
    }}
    onPointerLeave={() => {
        document.body.style.cursor = "default";
    }}
/>

Suggested solution:

Activity

  1. RodrigoHamuy commented on Nov 14, 2024

    @RodrigoHamuy
    RodrigoHamuy
    on Nov 14, 2024
    Owner

    That's because Maplibre and Mapbox also have a cursor style. You can aim at the canvas instead of the document body to have priority in the CSS hierarchy.

  2. newguy123-creator commented on Nov 14, 2024

    @newguy123-creator
    newguy123-creator
    on Nov 14, 2024
    Author

    That's because Maplibre and Mapbox also have a cursor style. You can aim at the canvas instead of the document body to have priority in the CSS hierarchy.

    Yes I gathered that. The question therefore is, how can I overrirde it and make my style important?

  3. Repository owner locked and limited conversation to collaborators on Nov 15, 2024
  4. RodrigoHamuy
    converted this issue into a discussion #130 on Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions