如何使用jQuery将光标从指针更改为手指?

And*_*rew 122 javascript css jquery

这可能很容易,但我以前从未这样做过.如何将光标更改为手指(如点击链接)而不是常规指针?

以及如何使用jQuery实现这一点,因为我正在使用它.

Pet*_*ley 237

$('selector').css('cursor', 'pointer'); // 'default' to revert
Run Code Online (Sandbox Code Playgroud)

我知道根据你原来的问题可能会让人感到困惑,但"手指"光标实际上被称为"指针".

普通箭头光标只是"默认".

所有可能的默认指针看起来都是DEMO

  • 如果可能的话,通过CSS(比如说:hover选择器)这样做,并完全避免使用jquery. (14认同)
  • @The Who - 当然,但是如果更改光标是依赖于JS的功能的一部分(假设你有一个滑块),那么如果用户关闭JS,你就不希望光标改变. (8认同)
  • 我将它与`$('selector').css('cursor','auto');`一起用于在将鼠标移出指针区域时去除样式.CSS类可能更干净......使用`$('...').addClass('someclass')`和`$('...').removeClass('someclass')` (2认同)

SpY*_*3HH 16

更新!新的和改进的!找到插件@ GitHub!


另一方面,虽然这个方法很简单,但我创建了一个jQuery插件(在这个jsFiddle中找到,只是在注释行之间复制和过去的代码),这使得任何元素上的光标都变得如此简单$("element").cursor("pointer").

但那还不是全部!现在就采取行动,你就会拿到手功能positionishover不收取额外费用!没错,2个非常方便的光标功能......免费!

它们的工作方式与演示中看到的一样简单:

$("h3").cursor("isHover"); // if hovering over an h3 element, will return true, 
    // else false
// also handy as
$("h2, h3").cursor("isHover"); // unless your h3 is inside an h2, this will be 
    // false as it checks to see if cursor is hovered over both elements, not just the last!
//  And to make this deal even sweeter - use the following to get a jQuery object
//       of ALL elements the cursor is currently hovered over on demand!
$.cursor("isHover");
Run Code Online (Sandbox Code Playgroud)

也:

$.cursor("position"); // will return the current cursor position as { x: i, y: i }
    // at anytime you call it!
Run Code Online (Sandbox Code Playgroud)

供应有限,所以行动吧!


Rom*_*ulo 6

如何将光标更改为手指(如点击链接)而不是常规指针?

使用CSS属性非常简单cursor,jQuery不需要.

您可以阅读以下内容:CSS cursor propertycursor - CSS | MDN

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}
Run Code Online (Sandbox Code Playgroud)
<a class="default" href="#">default</a>

<a class="pointer" href="#">pointer</a>
Run Code Online (Sandbox Code Playgroud)