There are four ways to customize mouse pointers using CSS: 1. Use the cursor attribute to set built-in styles, such as pointer, text, etc.; 2. Use url() to specify a custom picture as the cursor and set an alternate style; 3. Add coordinate values after url() to adjust the hot spot position of the cursor; 4. Use JavaScript to hide the native cursor and use elements to simulate dynamic effects. Each method is suitable for different scenarios, and needs to pay attention to compatibility, performance and user experience details.
Sometimes, websites or web applications require some small details to enhance the experience or highlight the style, such as customizing the mouse pointer. This is actually quite easy to implement in CSS, and it only takes a few attributes to do it.
Use the cursor property to set basic styles
The easiest way is to use the cursor attribute of CSS to change the style of the mouse. The browser comes with some common cursor styles, such as pointer (hand shape), text (vertical line when entering text), wait (wait state), etc.
button {
cursor: pointer;
}This method is suitable for most cases, especially for projects that just want to stym the mouse slightly. But if you want a completely custom image as your cursor, you have to look down.
Use pictures as custom cursor
If you want to use your own design icon or image as your cursor, you can use the following format:
.custom-cursor {
cursor: url('path/to/cursor.png'), auto;
}- The first parameter is the image path, which can be in
.pngor.curformat. - The second parameter is the fallback value, usually
autoor other built-in styles, in case the image fails to load.
Notice:
- The image size is best controlled at 32x32 or smaller, as it may display abnormalities if it is too large.
- Some browsers (especially mobile) may not support custom cursor images.
Change the cursor hotspot position (optional)
By default, the "click point" of the cursor is in the middle of the image. If you want to specify a specific point as the interactive point, you can add coordinate values after url() :
cursor: url('cursor.png') 0 0, auto;
0 0 here indicates that the upper left corner is a hot spot, which is suitable for an arrow-like cursor; if it is in the shape of a pencil, it may be written as a value like 8 32 , so that the click point falls on the tip of the pen.
However, this function is rarely used in actual development, because most of the time, the default hotspot is easy to use.
To achieve dynamic effects with JavaScript (advanced)
If you want to make effects such as following animation, zooming, switching states, etc., pure CSS is not enough. At this time, you can use hidden real cursor and use a div to simulate the cursor behavior:
body {
cursor: none; /* Hide native cursor*/
}
.custom-cursor-element {
position: fixed;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
}With a little more JS control position:
const cursor = document.querySelector('.custom-cursor-element');
document.addEventListener('mousemove', e => {
cursor.style.left = e.clientX 'px';
cursor.style.top = e.clientY 'px';
});This method is flexible, but it also means more performance overhead and compatibility issues. It is recommended to use only when special visual effects are needed.
Basically that's it. Although it seems simple, there are several places where custom cursors are easily overlooked, such as image size, browser compatibility, and whether they affect the user's operating experience. Just pay attention to these details and you can use them just right.
The above is the detailed content of How to create a custom cursor with CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
CSS tutorial for creating loading spinners and animations
Jul 07, 2025 am 12:07 AM
There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animation through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.
Addressing CSS Browser Compatibility issues and prefixes
Jul 07, 2025 am 01:44 AM
To deal with CSS browser compatibility and prefix issues, you need to understand the differences in browser support and use vendor prefixes reasonably. 1. Understand common problems such as Flexbox and Grid support, position:sticky invalid, and animation performance is different; 2. Check CanIuse confirmation feature support status; 3. Correctly use -webkit-, -moz-, -ms-, -o- and other manufacturer prefixes; 4. It is recommended to use Autoprefixer to automatically add prefixes; 5. Install PostCSS and configure browserslist to specify the target browser; 6. Automatically handle compatibility during construction; 7. Modernizr detection features can be used for old projects; 8. No need to pursue consistency of all browsers,
What is the difference between display: inline, display: block, and display: inline-block?
Jul 11, 2025 am 03:25 AM
Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizontalpadding/margins—idealforinlinetextstyling
Styling visited links differently with CSS
Jul 11, 2025 am 03:26 AM
Setting the style of links you have visited can improve the user experience, especially in content-intensive websites to help users navigate better. 1. Use CSS's: visited pseudo-class to define the style of the visited link, such as color changes; 2. Note that the browser only allows modification of some attributes due to privacy restrictions; 3. The color selection should be coordinated with the overall style to avoid abruptness; 4. The mobile terminal may not display this effect, and it is recommended to combine it with other visual prompts such as icon auxiliary logos.
Creating custom shapes with css clip-path
Jul 09, 2025 am 01:29 AM
Use the clip-path attribute of CSS to crop elements into custom shapes, such as triangles, circular notches, polygons, etc., without relying on pictures or SVGs. Its advantages include: 1. Supports a variety of basic shapes such as circle, ellipse, polygon, etc.; 2. Responsive adjustment and adaptable to mobile terminals; 3. Easy to animation, and can be combined with hover or JavaScript to achieve dynamic effects; 4. It does not affect the layout flow, and only crops the display area. Common usages are such as circular clip-path:circle (50pxatcenter) and triangle clip-path:polygon (50%0%, 100 0%, 0 0%). Notice
What is the CSS Painting API?
Jul 04, 2025 am 02:16 AM
TheCSSPaintingAPIenablesdynamicimagegenerationinCSSusingJavaScript.1.DeveloperscreateaPaintWorkletclasswithapaint()method.2.TheyregisteritviaregisterPaint().3.ThecustompaintfunctionisthenusedinCSSpropertieslikebackground-image.Thisallowsfordynamicvis
How to create responsive images using CSS?
Jul 15, 2025 am 01:10 AM
To create responsive images using CSS, it can be mainly achieved through the following methods: 1. Use max-width:100% and height:auto to allow the image to adapt to the container width while maintaining the proportion; 2. Use HTML's srcset and sizes attributes to intelligently load the image sources adapted to different screens; 3. Use object-fit and object-position to control image cropping and focus display. Together, these methods ensure that the images are presented clearly and beautifully on different devices.
What are common CSS browser inconsistencies?
Jul 26, 2025 am 07:04 AM
Different browsers have differences in CSS parsing, resulting in inconsistent display effects, mainly including the default style difference, box model calculation method, Flexbox and Grid layout support level, and inconsistent behavior of certain CSS attributes. 1. The default style processing is inconsistent. The solution is to use CSSReset or Normalize.css to unify the initial style; 2. The box model calculation method of the old version of IE is different. It is recommended to use box-sizing:border-box in a unified manner; 3. Flexbox and Grid perform differently in edge cases or in old versions. More tests and use Autoprefixer; 4. Some CSS attribute behaviors are inconsistent. CanIuse must be consulted and downgraded.
