เปลี่ยนเคอร์เซอร์เป็นตัวชี้นิ้ว

ฉันมีสิ่งนี้aและฉันไม่รู้ว่าฉันต้องใส่ลงใน "onmouseover" เพื่อที่เคอร์เซอร์จะเปลี่ยนเป็นตัวชี้นิ้วเหมือนลิงค์ปกติ:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

ฉันอ่านที่ไหนสักแห่งที่ฉันต้องใส่:

onmouseover="cursor: hand (a pointing hand)"

แต่มันไม่ทำงานสำหรับฉัน

รวมทั้งฉันไม่แน่ใจว่านี่เป็น JavaScript, CSS หรือ HTML ธรรมดา ๆ

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

มันเป็น CSS

หรือในสไตล์ชีท:

a.menu_links { cursor: pointer; }

คุณสามารถทำได้ใน CSS:

a.menu_links {
    cursor: pointer;
}

นี่เป็นพฤติกรรมเริ่มต้นสำหรับลิงก์ คุณต้องลบล้างอย่างใดอย่างหนึ่งในที่อื่นใน CSS ของคุณหรือไม่มีhrefแอตทริบิวต์ในนั้น (มันหายไปจากตัวอย่างของคุณ)

ฉันชอบใช้อันนี้ถ้าฉันมีเพียงลิงค์เดียวในหน้า:

onMouseOver="this.style.cursor='pointer'"

ใน css เขียน

a.menu_links:hover{ cursor:pointer}

นี่คือบางสิ่งบางอย่างที่น่าสนใจถ้าคุณต้องการที่จะไปให้ไกลกว่านี้ ใน URL คุณสามารถใช้ลิงก์หรือบันทึกรูปภาพ png และใช้เส้นทาง ตัวอย่างเช่น:

URL (สินทรัพย์ / imgs / theGoods.png ');

ด้านล่างคือรหัส:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

ดังนั้นสิ่งนี้จะทำงานภายใต้ขนาด 128 X 128 ยิ่งใหญ่กว่าและภาพจะไม่โหลด แต่คุณสามารถใช้รูปภาพใดก็ได้ที่คุณต้องการ! นี่จะพิจารณา css3 แท้ๆและบาง html สิ่งที่คุณต้องทำใน html คือ

<div class='cursor'></div>

และเฉพาะใน div นั้นเคอร์เซอร์นั้นจะปรากฏขึ้น ดังนั้นฉันมักจะเพิ่มลงในแท็กร่างกาย

ฉันคิดว่า "คำตอบที่ดีที่สุด" ข้างต้นแม้ว่าจะมีความถูกต้องทางโปรแกรม แต่ไม่ได้ตอบคำถามที่ถูกวาง คำถามถามว่าจะเปลี่ยนตัวชี้ในเหตุการณ์ mouseover ได้อย่างไร ฉันเห็นโพสต์เกี่ยวกับวิธีที่อาจมีข้อผิดพลาดบางแห่งไม่ตอบคำถาม ในคำตอบที่ได้รับการยอมรับเหตุการณ์การวางเมาส์นั้นจะว่างเปล่า ( onmouseover="") และตัวเลือกสไตล์จะรวมอยู่ด้วย ทำไมสิ่งนี้ถึงทำให้งงงัน

อาจไม่มีอะไรผิดปกติกับลิงค์ของผู้สอบถาม พิจารณา html ต่อไปนี้:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

เมื่อผู้ใช้เลื่อนเมาส์ไปที่ลิงค์นี้ตัวชี้จะไม่เปลี่ยนเป็นมือ ... แทนตัวชี้จะทำงานเหมือนกำลังลอยอยู่เหนือข้อความปกติ บางคนอาจไม่ต้องการสิ่งนี้ ... ดังนั้นตัวชี้เมาส์ต้องได้รับการบอกกล่าวให้เปลี่ยน

คำตอบที่ต้องการคือ (ซึ่งโพสต์โดยผู้อื่น):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

อย่างไรก็ตามนี่คือ ... ฝันร้ายหากคุณมีสิ่งเหล่านี้มากมายหรือใช้สิ่งนี้ทุกที่และตัดสินใจที่จะทำการเปลี่ยนแปลงหรือทำงานเป็นบั๊ก ดีกว่าที่จะทำให้คลาส CSS สำหรับมัน:

a.lendhand {
  cursor: pointer;
}

แล้ว:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

มีวิธีอื่น ๆ อีกมากมายซึ่งจะดีกว่าวิธีนี้ DIV s, ปุ่ม s, IMG s, ฯลฯ อาจพิสูจน์ได้ว่ามีประโยชน์มากกว่า ฉันไม่เห็นอันตรายใด ๆ ในการใช้<a>...</a>งาน

jarett

เพิ่มhrefแอตทริบิวต์เพื่อให้เป็นลิงก์ที่ถูกต้อง & return false;ในตัวจัดการเหตุการณ์เพื่อป้องกันไม่ให้เกิดการนำทาง

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(หรือdisplayData()ส่งคืนค่าเท็จและ..="return displayData(..)

โซลูชันผ่าน CSS บริสุทธิ์ตามที่ระบุไว้ในคำตอบที่ระบุว่าดีที่สุดไม่เหมาะกับสถานการณ์นี้

ตัวอย่างในหัวข้อนี้ไม่มีแอ็ตทริบิวต์ href แบบสแตติกปกติมันกำลังเรียกใช้ JS เท่านั้นดังนั้นจะไม่ทำอะไรเลยหากไม่มี JS

ดังนั้นจึงเป็นการดีที่จะสลับใช้ตัวชี้ด้วย JS เท่านั้น ดังนั้นการแก้ปัญหา

onMouseOver="this.style.cursor='pointer'"

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