0

I wanna built a custom cursor effect like this one.

My solution includes a <div> element that follows the cursor using the onmousemove event.

Which is the proper way to handle hover state (want to change the cursor's appearance), when the cursor is inside specific elements?

dmraptis
  • 909
  • 1
  • 10
  • 22
  • Proper way is to apply style to your cursor in your css: Please Refer - https://www.w3docs.com/tools/code-editor/2404 – GRS Jan 09 '20 at 16:01
  • 2
    You can check this, it is probably a solution for you: https://stackoverflow.com/questions/51281666/animate-custom-cursor-when-hovering-on-a-link – Hugo Sohm Jan 09 '20 at 16:13
  • 1
    @HugoS I wanted to run away from adding a custom function to each hoverable element, but it seems the only valid solution. Thanks for the reference answer anyway! – dmraptis Jan 09 '20 at 17:02

2 Answers2

1

You can use onMouseEnter and onMouseLeave

<div>
  <div id='cursor'></div>
  <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>Hover</div>
</div>

var cursorElement = document.getElementById('cursor');
function onMouseEnter(){
  cursorElement.classList.add('hovered');
}
function onMouseLeave(){
  cursorElement.classList.remove('hovered'); 
}
Julio Javier
  • 162
  • 4
0

Currently hovered element can be obtained from event target of mousemove event


document.addEventListener("mousemove", function(e) {
        let current target = e.target
    }
)
bapafes482
  • 444
  • 4
  • 18