SolidJS•16mo ago

Custom cursor not working

I have this simple custom cursor component. When I try to hover over some sections (all sections except headers for some reason) it starts jumping and disappears. I have no idea what that could be. Am I missing something? Btw it's used on an Astro project, in case it's relevant

import { createMousePosition } from "@solid-primitives/mouse"
import "../styles/Cursor.css"

const Cursor = () => {
  const pos = createMousePosition(window)

  return (
    <>
      <div style={{ left: `${pos.x}px`, top: `${pos.y}px` }} class="ring"></div>
      <div class="dot" style={{ left: `${pos.x}px`, top: `${pos.y}px` }}></div>
    </>
  )
}

export default Cursor

import { createMousePosition } from "@solid-primitives/mouse"
import "../styles/Cursor.css"

const Cursor = () => {
  const pos = createMousePosition(window)

  return (
    <>
      <div style={{ left: `${pos.x}px`, top: `${pos.y}px` }} class="ring"></div>
      <div class="dot" style={{ left: `${pos.x}px`, top: `${pos.y}px` }}></div>
    </>
  )
}

export default Cursor

4 Replies

Max•16mo ago

hi, seems fine on blank playground https://playground.solidjs.com/anonymous/caacde54-5016-446e-b797-c087b6cb3682. You could try using transform instead of left and top in case that changes. idk about astro, but as far as i know the window object should be the same so the position should be fine.

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Max•16mo ago

if you look at the output of pos on create effect maybe you can isolate the issue see if its a rendering issue or actually issue getting the position of cursor

suhaylmvOP•16mo ago

with transform still the same happens and also it's not precise, it gets a bit off from the cursor good idea, I checked it and it gets correctly the position of the cursor must be a rendering or css positioning issue

suhaylmvOP•16mo ago

I found a react tutorial, and it looks like context is needed, to be able to control how the cursor behaves when it's on a certain element https://dev.to/holdmypotion/react-custom-cursor-no-extra-dependencies-25ki

DEV Community

React: Custom Cursor (No Extra dependencies!)

Just like the last article, this also focuses on a feature that I would like my portfolio to have. A...

Gaming

Programming

Custom cursor not working