Cross-Browser 'Cursor:Pointer'

Cross-browser 'cursor:pointer'

According to Quirksmode, the only cross-browser syntax is:

element {
    cursor: pointer;
    cursor: hand;
}

They give some more information about the cursor as well:

In the past the hand value was
Microsoft's way of saying pointer; and
IE 5.0 and 5.5 only support hand.
Because it's the cursor value that's
used most often, most other browsers
have also implemented hand.

Since IE 6 and 7 support pointer,
there's no more reason to use hand,
except when older IEs are part of your
target audience.

I think the page you linked to might be a little outdated with the newest browsers.

Crossbrowser GRAB cursor (-moz, -webkit)

In accordance with J.Steve's answer:

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

from here CSS for grabbing cursors (drag & drop)
and this comments

are you sure a comma-list still works? I'm using cursor:move;
cursor:-webkit-grab; cursor:-moz-grab; cursor:grab; with most
preferred last

the comma-list works if you're specifying multiple formats like
cursor: url(example.svg#linkcursor), url(hyper.cur), pointer

In my case I set CCS options

item.setAttribute("style", "cursor: move; cursor: grab; cursor:-moz-grab; cursor:-webkit-grab;");

and unset them by

item.setAttribute("style", "cursor: auto;"); after my cancel event(mouseup).

---

http://jsfiddle.net/gwau7r9r/

JS:

var item = document.getElementById("changeCurArea");
    item.addEventListener("mousedown", func, false);
    item.addEventListener("mouseup", func1, false);

    function func() {
        item.setAttribute("style", "cursor: move; cursor: grab; cursor:-moz-grab; cursor:-webkit-grab;");
    }

    function func1() {
        // item.setAttribute("cursor", "auto");
        item.setAttribute("style", "cursor: auto;");
    }

HTML:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="350" viewBox="200 150">
    <rect id="mySvgArea" width="400" height="350" stroke="black" fill="lightgrey"></rect>
    <rect id="changeCurArea" x="100" y="100" width="200" height="150" stroke="red" fill="pink"></rect>
</svg>

How to change the cursor into a hand when a user hovers over a list item?

In light of the passage of time, as people have mentioned, you can now safely just use:

li { cursor: pointer; }

cross browser hide mouse cursor

Looks like:

/* css */
div {
    cursor: url(url/to/transparent.gif), auto;
}

should do the trick or:

divEl.style.cursor = 'url(path/to/transparent.gif), auto'; // javascript

But hiding the cursor can annoy visitors immensly.

Addendum: In the examples I wrote .gif files, but you might actually need to convert to .cur or .ani files for better browser support.

How to implement cross-context CSS image cursors?

You need to override the default browser cursor, by targeting the a element

Demo

div, div a:hover {
   cursor: url(http://investor.dragonwaveinc.com/common/images/briefcase-addv2.gif), auto;
}

So by using div a:hover, we will override the default pointer cursor on hover

Mac browser cursor link behavior

After a few hours the behavior was gone.

An entire reboot would probably have solved it too (I only shut down the browsers and even upgraded them, but even that didn't change the behavior).

As Jaime S mentioned, this issue also mentions it CSS cursor pointer flicker once and then back to default

---

Related Topics