2009-12-03 74 views

回答

212
$('selector').css('cursor', 'pointer'); 

我知道你的原始問題可能會引起混淆,但「finger」遊標實際上被稱爲「指針」。

正常的箭頭光標只是「默認」。

all possible default pointer looks DEMO

+14

如果可能的話,通過CSS做到這一點(有說:懸停選擇器),並完全避免的jQuery。 – 2009-12-03 23:06:41

+8

@The Who - 當然,但是如果改變光標是依賴於JS的功能的一部分(假設你有一個滑塊),那麼如果用戶關閉了JS,你不會希望光標改變。 – 2011-07-08 18:46:46

+2

我用''('selector').css('cursor','auto');'將鼠標移出指針區域時去掉樣式。使用'$('...')。addClass('someclass')'和'$('...')。removeClass('someclass')' – jocull 2011-11-14 04:07:38

16

更新!新&改進!查找插件@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

大聲笑,沒有理由的減號,猜測「H8Rz去h8」 – SpYk3HH 2012-04-27 15:24:26

+3

哈哈謝謝你這個 – Andrew 2012-04-27 17:44:37

4

如何將光標更改爲手指(如點擊鏈接)而不是常規指針?

這是非常簡單的實現使用CSS屬性cursor,沒有jQuery需要。

你可以閱讀更多關於:CSS cursor propertycursor - CSS | MDN

.default { 
 
    cursor: default; 
 
} 
 
.pointer { 
 
    cursor: pointer; 
 
}
<a class="default" href="#">default</a> 
 

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

0

這是非常簡單的

HTML

<div> 
<input type="text" placeholder="sometext" /> 

<input type="button" value="button" class="button"/> 
<br/><br/> 
<button class="button"> Another button</button> 
</div> 

jQuery的

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

// for old IE browsers 

$('.button').css('cursor', 'hand'); 

}); 

Check it out on JSfiddle