วิธีการเปลี่ยนเคอร์เซอร์จากตัวชี้เป็นนิ้วโดยใช้ jQuery

128

นี่อาจจะง่ายจริงๆ แต่ฉันไม่เคยทำมาก่อน คุณเปลี่ยนเคอร์เซอร์เป็นนิ้วได้อย่างไร (เช่นสำหรับการคลิกที่ลิงก์) แทนที่จะเป็นตัวชี้ปกติ?

และวิธีการทำเช่นนี้กับ jQuery เพราะนั่นคือสิ่งที่ฉันใช้มัน

javascript jquery css

— แอนดรู
แหล่งที่มา

247

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

ฉันรู้ว่าอาจทำให้สับสนสำหรับคำถามต้นฉบับของคุณ แต่เคอร์เซอร์ "นิ้ว" เรียกว่า "ตัวชี้" จริง ๆ แล้ว

เคอร์เซอร์ลูกศรปกติเป็นเพียง "เริ่มต้น"

ตัวชี้เริ่มต้นที่เป็นไปได้ทั้งหมดจะมีลักษณะเป็นDEMO

— ปีเตอร์เบลีย์
แหล่งที่มา

14

ถ้าเป็นไปได้ให้ทำผ่าน CSS (พูดกับ a: ตัวเลือกโฮเวอร์) และหลีกเลี่ยง jquery ทั้งหมด

— Who

8

@ ใคร - แน่นอน แต่ถ้าเปลี่ยนเคอร์เซอร์เป็นส่วนหนึ่งของฟังก์ชั่นที่ขึ้นอยู่กับ JS (สมมุติว่าคุณมีแถบเลื่อน) คุณจะไม่ต้องการให้เคอร์เซอร์เปลี่ยนหากผู้ใช้ปิด JS ไว้

— ปีเตอร์ Ajtai

3

ฉันใช้สิ่งนี้ร่วมกับ$('selector').css('cursor', 'auto');เพื่อตัดสไตล์เมื่อเลื่อนเมาส์ออกจากพื้นที่ตัวชี้ คลาส CSS อาจจะทำความสะอาด ... ที่มี$('...').addClass('someclass')และ$('...').removeClass('someclass')

— jocull

เมื่อใช้สิ่งนี้กับแท็กเนื้อความและเปลี่ยนเป็นเคอร์เซอร์ที่กำหนดเองเช่นนี้$('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );ดูเหมือนจะไม่ทำงาน ฉันไม่รู้ว่านี่เป็นข้อผิดพลาดภายใน jquery หรือ chrome havent ทดสอบสิ่งนี้กับเบราว์เซอร์อื่น ๆ

— jcfrei

16

Update! ใหม่ & ปรับปรุงแล้ว! ค้นหาปลั๊กอิน @ 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!

วัสดุมี จำกัด ดังนั้น Act Now!

— SpYk3HH
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

— โรมูโล
แหล่งที่มา

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

— Abk
แหล่งที่มา