hermanwikner / vue-custom-cursor Goto Github PK

Interactive custom cursor in Vue.js

Vue 100.00%

vue-custom-cursor's Issues

Cursor stop working when I enter a svg (not tested on something else)

I have my cursor in the App.js with another component : my homepage

<template>
  <Cursor
    :targets="['img', 'a', 'button']"
    :circleColor="'#fff'"
    :dotColor="'#ffffff'"
    :dotColorHover="'transparent'"
    :hoverSize="1.3"
  >
  </Cursor>
  <Homepage />
</template>

As soon as I enter my svg, I got this error :
custom-cursor.vue:52 Uncaught TypeError: e.target.className.toLowerCase is not a function

The only workaround that I've found is to set the svg as a hover item, but it's not how I want it to work

Cursor becomes blurry on hover expansion?

I can't find a specific reason for this occurrence. On initial contact with a targeted element, the outer circle becomes blurry for a second or two then just automatically smoothens out. Can anyone elaborate or even +1 me?

How can I customize styling using CSS variables?

Instead of targets, use data-attributes for hovering

Realy good work you did, I have one (maybe later a few) new features.
Use data-attributes instead of targets array, cause if you have more than one class for get targeting element it will not work.

e.target.getAttribute("data-hover-cursor")
<img src="some_img_path" data-hover-cursor="true" class="link__img" />

and add hide cursor props ;)

Recommend Projects