Create a custom cursor with Alpine JS and easily apply hover effects 👆
<script
defer
src="https://unpkg.com/alpinejs-cursor@latest/dist/cursor.min.js"
></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>yarn add -D alpinejs-cursor
npm install -D alpinejs-cursorimport Alpine from 'alpinejs'
import cursor from 'alpinejs-cursor'
Alpine.plugin(cursor)
Alpine.start()This plugin makes use of the custom-cursor package.
<body x-data x-cursor>
...
</body>You can pass a single modifier to x-cursor which will modifier how many cursor are created.
<body x-data x-cursor.5>
...
</body>In this example it will create 5 cursor.
You can use the x-cursor-target attribute to pass through an array of HTML elements that will apply a unique CSS class name to the <body> tag that you can use for hover effects.
<body x-data x-cursor x-cursor-targets='["button", "#form", ".click"]'>
...
</body>In this example it will create the following classes.
cursor-hover--buttoncursor-hover--formcursor-hover--click
Which you can then use in CSS like this.
.cursor-hover--button [data-cursor] {
background: #00f;
}
