Custom Cursor Interaction Point - CSS/Jquery

Custom cursor interaction point - CSS / JQuery

You just need to provide the hotspot's <x> and <y> position in your CSS:

In your example, the center happens to be 24px in from the top/left (huge ass cursor lol)

cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;

http://jsfiddle.net/9kNyF/15/ see?

Why won't the path to a url used to change the mouse cursor work in jQuery? Should I even use it?

You can't do that.

ANI is not supported. An animated PNG or GIF will not create an animated cursor.

Also, you need to put a fallback keyword after the url.

Add CSS cursor property when using pointer-events: none

Using pointer-events: none will disable all mouse interactions with that element. If you wanted to change the cursor property, you would have to apply the changes to the parent element. You could wrap the link with an element and add the cursor property to it.

Example Here

HTML

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

There are a few browser inconsistencies, though. To make this work in IE11, it seems like you need a pseudo element. The pseudo element also allows you to select the text in FF. Oddly enough, you can select the text in Chrome without it.

Updated Example

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

HTML-Tooltip position relative to mouse pointer

For default tooltip behavior simply add the title attribute. This can't contain images though.

<div title="regular tooltip">Hover me</div>

Before you clarified the question I did this up in pure JavaScript, hope you find it useful. The image will pop up and follow the mouse.

jsFiddle

JavaScript

var tooltipSpan = document.getElementById('tooltip-span');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
};

CSS

.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

Extending for multiple elements

One solution for multiple elements is to update all tooltip span's and setting them under the cursor on mouse move.

jsFiddle

var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};

change cursor to finger pointer

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

It's css.

Or in a style sheet:

a.menu_links { cursor: pointer; }

How to combine cursor: not-allowed and pointer-events: none;

you can't do this because pointer-events: none; disable all mouse functions, but you can do a trick and wrap your button with a div then use cursor: not-allowed; on this.

.pointer-events-none {    pointer-events: none;}
.wrapper {    cursor: not-allowed;}

<div class="wrapper"><button class="pointer-events-none">Some Text</button></div>

---

Related Topics