I have an image with size 105x105. I am using it as cursor using this CSS script:
.class_1 .child_1 {
cursor: url(theBell.png) 20 20, auto;
}
The image appears when I move the mouse over element, but it is too large.
I do not know how to reduce size of cursor.
I had some searching but found no positive results.
While the specification does not limit the cursor image size, user agents commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels.
Checked it, I guess it is not possible to natively change the cursor's size. One thing you can do is to hide the cursor using the following code: cursor: none; And use an image, which follows the cursor, and style it using CSS, for its width and height .
Answer: Use the CSS cursor propertygif or . png (for Firefox, Chrome, Safari) and . cur for (for Internet Explorer). After that apply the cursor property with a comma-separated list of URLs pointing to these cursor images.
Unfortunately you can't reduce the size of the cursor. You need to reduce the size of the image. 36 * 36 px is the recommended size.
Some more useful information here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With