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

128

这可能真的很容易，但是我从未做过。如何将光标更改为手指（例如单击链接）而不是常规指针？

以及如何使用jQuery做到这一点，因为这就是我使用它的目的。

javascript jquery css

— 安德鲁
source

247

$('selector').css('cursor', 'pointer'); // 'default' to revert

我知道每个原始问题可能会使您感到困惑，但是“手指”光标实际上称为“指针”。

普通的箭头光标只是“默认”。

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

— 彼得·贝利
source

14

如果可能的话，通过CSS来做到这一点（例如使用：hover选择器），并完全避免使用jquery。

— 谁的谁

8

@The Who-当然可以，但是如果更改光标是依赖JS的功能的一部分（假设您有一个滑块），那么如果用户关闭了JS，就不希望更改光标。

— 2011年

3

$('selector').css('cursor', 'auto');当将鼠标移出指针区域时，我结合使用了此功能以剥离样式。CSS类可能更干净... $('...').addClass('someclass')和$('...').removeClass('someclass')

— jocull

将其应用于body标签并更改为这样的自定义光标时：$('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );它似乎不起作用。我不知道这是jquery还是chrome中的错误。还没有在其他浏览器上对此进行测试。

— jcfrei 2012年

16

更新！新功能和改进功能！查找插件@ GitHub！

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

但这还不是全部！现在就采取行动，你就会拿到手功能position及ishover不收取额外费用！是的，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");

也：

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

物资有限，所以请立即行动！

— SpYk3HH
source

7

如何将光标更改为手指（例如单击链接）而不是常规指针？

使用CSS属性非常容易实现cursor，jQuery不需要。

您可以在以下内容中了解更多信息：CSS cursor property和cursor - CSS | MDN

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}

<a class="default" href="#">default</a>

<a class="pointer" href="#">pointer</a>

展开摘要

— 罗慕洛
source

1

非常简单

的HTML

<input type="text" placeholder="some text" />
<input type="button" value="button" class="button"/>
<button class="button">Another button</button>

jQuery的

$(document).ready(function(){
  $('.button').css( 'cursor', 'pointer' );

  // for old IE browsers
  $('.button').css( 'cursor', 'hand' ); 
});

在JSfiddle上查看

— 阿卜克
source