Comments on: cursor

By: Barry Cap

Barry Cap — Sun, 16 May 2021 19:23:15 +0000

If you want to change the offset of a cursor image, you can add coordinates like this:

cursor:url(http://example.com/cursor.png) 12 16, auto;

(Values are specified in pixels using cursor: [ [<x> <y>]?,] syntax.)

By: Victor

Victor — Fri, 18 Sep 2020 13:26:05 +0000

Thanks, this was very useful! I’ve used this CSS to display a speaker icon as a mouse cursor when hovering the hero video at https://winway.se:

cursor: url("https://winway.se/wp-content/uploads/2020/09/sound_test-1-e1599744120404.png"), auto;

It works perfect in Chrome but Safari only displays the default pointer. Any advice on what’s wrong? When I test the PNG cursor examples on css-tricks.com, they work fine in Safari.

By: Nolan

Nolan — Thu, 20 Jun 2019 19:33:12 +0000

How can I get my cursor as big as this site, it is so much fun!!

http://www.louiswalch.com/

By: M Bilal Ahsan

M Bilal Ahsan — Fri, 15 Feb 2019 11:09:33 +0000

In reply to yahya. you cas use (cursor:pointer;) in css class

By: Geoff Graham

Geoff Graham — Wed, 25 Apr 2018 13:43:44 +0000

In reply to Aymen.

Yeah! The cursor property accepts a URL parameter where you can specify an image. The “custom” example in this post shows the syntax:

.custom { cursor: url(images/my-cursor.png), auto; }

Here’s another post with some examples: https://css-tricks.com/using-css-cursors/

By: Aymen

Aymen — Wed, 25 Apr 2018 10:24:01 +0000

i would like to change cursor to a text on img hover any one know the trick?

By: Aditi

Aditi — Wed, 18 Apr 2018 08:28:15 +0000

Unfortunately this seems not to work in any of my browsers; I use Windows 8.1, and use Google Chrome, Firefox and the default IExplorer as some of the possible browser I use. I’ve tried all and none managed to render the icon.
IF I lost it somewhere, feel free to give a shout and advice me. Please and thank you.

/Syntax/
body {
cursor: url(“C:\Users\User\Documents\Notepadd\Antivirus.ico”), default; /We’ve set our custom cursor and also the default fall-back cursor/
}

By: Radhika

Radhika — Wed, 18 Apr 2018 08:27:15 +0000

I would suggest you use relative paths as apposed to absolute paths,
so if you place your HTML document in the same folder as your .ico file.
Try:

body {
cursor: url(‘Antivirus.ico’), default;
}

By: Reshma Pandit

Reshma Pandit — Wed, 18 Apr 2018 08:26:40 +0000

Mr Anthony do you have any advice on what I can do to make the icon render.. I’m still just developing the website.
Any help would be appreciated, Thanks

By: Newt

Newt — Tue, 30 Jan 2018 03:48:37 +0000

In reply to vinay. Use cursor:-webkit-drag

By: Newt

Newt — Tue, 30 Jan 2018 03:47:00 +0000

In reply to Dee. Can you post your code ?

By: Newt

Newt — Tue, 30 Jan 2018 03:44:57 +0000

In my web page, all the cursor types change to default after some time. Anyone knows why is that ?

By: Dee

Dee — Thu, 10 Nov 2016 03:57:53 +0000

Hi. I’m a Class 9 student and I’ve been trying to customize my cursor with an image in html, but it refuses to work. Can someone help please?

By: Sten Hougaard

Sten Hougaard — Mon, 12 Sep 2016 06:58:28 +0000

In reply to yahya. Hi Yahya Take a look at this Custom cursors using data-uri it shows how to create custom cursors.

By: yahya

yahya — Mon, 12 Sep 2016 00:06:51 +0000

can you help me i went the hand pointer..