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

Posted 2023-05-08

【中文标题】如何使用jQuery将光标从指针更改为手指？

【英文标题】：How to change cursor from pointer to finger using jQuery?

【发布时间】：2010-12-23 01:19:05

【问题描述】：

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

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

【参考方案1】：

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

我知道您的原始问题可能会令人困惑，但“手指”光标实际上称为“指针”。

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

all possible default pointer looks DEMO

【讨论】：

如果可能，请通过 CSS 执行此操作（例如使用 :hover 选择器）并完全避免使用 jquery。

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

我将它与$('selector').css('cursor', 'auto'); 结合使用，以在将鼠标移出指针区域时剥离样式。 CSS 类可能会更简洁......使用 $('...').addClass('someclass') 和 $('...').removeClass('someclass')

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

【参考方案2】：

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

---

另一方面，虽然that method 很简单，但我创建了一个 jQuery 插件 (found at this jsFiddle, just copy and past code between comment lines)，它可以像 $("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!

货源有限，赶快行动吧！

【参考方案3】：

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

使用 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>

【参考方案4】：

很简单

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' ); 
);

Check it out on JSfiddle