17
ปิดใช้งานเอฟเฟกต์โฮเวอร์บนเบราว์เซอร์มือถือ
ฉันกำลังเขียนเว็บไซต์ที่ตั้งใจจะใช้ทั้งจากเดสก์ท็อปและแท็บเล็ต เมื่อมีการเยี่ยมชมจากเดสก์ท็อปฉันต้องการให้พื้นที่ที่คลิกได้ของหน้าจอสว่างขึ้นพร้อมเอ:hoverฟเฟกต์ (สีพื้นหลังที่แตกต่างกัน ฯลฯ ) เมื่อใช้แท็บเล็ตไม่มีเมาส์ดังนั้นฉันจึงไม่ต้องการเอฟเฟกต์แบบโฮเวอร์ใด ๆ ปัญหาคือเมื่อฉันแตะอะไรบางอย่างบนแท็บเล็ตเบราว์เซอร์จะมี "เคอร์เซอร์ของเมาส์ที่มองไม่เห็น" บางชนิดซึ่งย้ายไปยังตำแหน่งที่ฉันแตะแล้วปล่อยไว้ที่นั่นดังนั้นสิ่งที่ฉันเพิ่งแตะจะสว่างขึ้นพร้อมกับ เลื่อนเอฟเฟกต์จนกว่าฉันจะแตะอย่างอื่น ฉันจะรับเอฟเฟกต์โฮเวอร์ได้อย่างไรเมื่อฉันใช้เมาส์ แต่กดปุ่มเหล่านี้เมื่อฉันใช้หน้าจอสัมผัส ในกรณีที่มีคนคิดจะแนะนำฉันไม่ต้องการใช้การดมกลิ่นของตัวแทนผู้ใช้ อุปกรณ์เดียวกันอาจมีทั้งหน้าจอสัมผัสและเมาส์ (อาจจะไม่ธรรมดาในปัจจุบัน แต่มีอีกมากมายในอนาคต) ฉันไม่สนใจอุปกรณ์นี้ฉันสนใจวิธีการใช้งาน: เมาส์หรือหน้าจอสัมผัส ฉันพยายามแล้ว hooking touchstart, touchmoveและtouchendเหตุการณ์ที่เกิดขึ้นและเรียกpreventDefault()ทั้งหมดของพวกเขาซึ่งจะปราบ "การเคอร์เซอร์ของเมาส์ที่มองไม่เห็น" บางส่วนของเวลา; แต่ถ้าฉันแตะอย่างรวดเร็วไปมาระหว่างสององค์ประกอบที่แตกต่างกันหลังจากแตะสองสามครั้งมันจะเริ่มขยับ "เคอร์เซอร์ของเมาส์" และทำให้เอฟเฟกต์โฮเวอร์สว่างขึ้น - มันเหมือนกับว่าฉันpreventDefaultไม่ได้รับเกียรติเสมอไป ฉันจะไม่เบื่อคุณด้วยรายละเอียดเว้นแต่จำเป็น - ฉันไม่แน่ใจด้วยซ้ำว่านั่นเป็นแนวทางที่ถูกต้อง ถ้าใครมีวิธีแก้ไขที่ง่ายกว่านี้ฉันหูแว่ว แก้ไข:สิ่งนี้สามารถทำซ้ำได้ด้วย CSS มาตรฐานปลอม:hoverแต่นี่เป็นคำอธิบายสั้น ๆ สำหรับการอ้างอิง <style> .box { border: 1px solid black; width: 150px; height: 150px; …
113
javascript
hover
touch