Creating a personalized cursor transition with CSS styling

Question

Creating a personalized cursor transition with CSS styling

I have an unordered list (ul) with items on each list item (li) having a different cursor. While it works fine, the transition is not smooth. Is there a way to make the transition from the default cursor to a custom image smoother?

HTML

<section class="who">
  <ul>
     <li>Purpose</li>
     <li>Creative</li>
     <li>Enthusiastic</li>
     <li>Adventure</li>
     <li>Curious</li>
     <li>Passionate</li>
  </ul>
</section>

CSS

.who ul li:first-of-type {
   cursor: url('/assets/media/icons/target.png'), auto;
}

Feel free to apply this concept to other list items as needed.

html css

Answer 1

Answer №1

Would you like to change the image cursor transition to be smooth, similar to a fade-in/out effect? If so, JavaScript will need to be involved:

.who ul li { cursor: none; }
Create a
```
<div class="cursor-container"></div>
```

.cursor-container { position:absolute; z-index:100; }

Place all your images into a div

.cursor-container .image-container { position:absolute; }

Use JavaScript's onMouseMove() function to track the cursor's coordinates and move the .cursor-container accordingly (see here for help)

Hide all images with CSS

.cursor-container .image-container { display:none }

Organize your list with
```
<li class="whatever" onmouseover="changeCursor()">
```
, each having a unique class name
In JavaScript, switch between all <li> classes and apply CSS3 transitions (like opacity) as needed.

I hope this information has been helpful.

The code snippet below is an example (not functional on jsfiddle, copy it to your local page).

<!DOCTYPE html>
<html>
  <head>
    <title> </title>

    <style type="text/css">
      // Styles go here
    </style>
  </head>
  <body>

    // HTML content goes here

    <script type="text/javascript">

    // JavaScript code goes here

    </script>

  </body>
</html>

Answer 2

Would you like to change the image cursor transition to be smooth, similar to a fade-in/out effect? If so, JavaScript will need to be involved:

.who ul li { cursor: none; }
Create a
```
<div class="cursor-container"></div>
```

.cursor-container { position:absolute; z-index:100; }

Place all your images into a div

.cursor-container .image-container { position:absolute; }

Use JavaScript's onMouseMove() function to track the cursor's coordinates and move the .cursor-container accordingly (see here for help)

Hide all images with CSS

.cursor-container .image-container { display:none }

Organize your list with
```
<li class="whatever" onmouseover="changeCursor()">
```
, each having a unique class name
In JavaScript, switch between all <li> classes and apply CSS3 transitions (like opacity) as needed.

I hope this information has been helpful.

The code snippet below is an example (not functional on jsfiddle, copy it to your local page).

<!DOCTYPE html>
<html>
  <head>
    <title> </title>

    <style type="text/css">
      // Styles go here
    </style>
  </head>
  <body>

    // HTML content goes here

    <script type="text/javascript">

    // JavaScript code goes here

    </script>

  </body>
</html>

Creating a personalized cursor transition with CSS styling

Answer №1

Similar questions

`On mouseup event, changing specific text`

scalable and circular picture displayed within a bootstrap-5 card

Glowing effects on svg shapes

Modify the CSS of the gauge element without causing any issues

Using PHP variables in CSS styling

`Can I embed inline .svg images into a Nuxt application?`

Issue with CSS3 animations

Showcasing Portfolio Work in a User-Friendly Mobile Design

An error was encountered involving an unexpected token < at the beginning of a JSON file while using express with firebase

Guide on implementing the recently established attribute ID using jQuery

Encountering difficulties with implementing and utilizing bootstrap in Symfony 5.3 with Encore plugin

Utilizing MaterialUI and CSS to craft this stunning box

Tips for extracting HTML entities from a string without altering the HTML tags

Form submission causing page to reload, getElementById function fails to return value, rendering form ineffective

Customize the background color of a particular select element within an array of dynamically created select elements

exploring numerous boxes in an engaging and educational tutorial

The runtime is experiencing difficulty in loading the Bootstrap files

Troubleshooting: JQuery - Applying CSS to dynamically generated elements

Steps to deactivate a textarea in angularjs based on a selected option's value meeting a specific condition

Extending image across several rows within a form