javascript - วิธีเปิดใช้งานสถานะ mouseenter/mouseover ขององค์ประกอบเพื่อการดีบักโดยใช้เครื่องมือสำหรับนักพัฒนา?
มีอะไรที่คล้ายกับการเปิดใช้งานสถานะ hover (CSS) สำหรับการเปิดใช้งานเหตุการณ์ javascript ไหม?
ดังนั้นฉันจึงกำลังใช้ Angular Materials tooltip ทุกอย่างทำงานได้ดี ฉันต้องการปรับสไตล์ของ tooltip ตามธีม แต่ไม่สามารถตรวจสอบองค์ประกอบได้เพราะมันจะมองเห็นได้เฉพาะเมื่อเมาส์เลื่อนผ่านองค์ประกอบนั้น
https://material.angular.io/components/tooltip/examples#tooltip-custom-class คลาสที่กำหนดเองทำงานได้และฉันสามารถเปลี่ยนสีได้ ฉันต้องการเปลี่ยนความกว้างและคุณสมบัติ CSS อื่น ๆ แต่ฉันไม่สามารถตรวจสอบองค์ประกอบเพื่อดูว่าสไตล์ใดที่ถูกนำมาใช้โดยค่าเริ่มต้นได้
ดังนั้นคำถามหลักคือ: มีสิ่งใดที่คล้ายกับการเปิดใช้งานสถานะโฮเวอร์ (CSS) สำหรับการเปิดใช้งานเหตุการณ์ Javascript (mouseover/mouseenter) หรือไม่?
คำตอบ #1
เคล็ดลับเจ๋งๆ ในการจับเหตุการณ์ mouseenter:mouseleave:
- เปิดคอนโซล (ในเบราว์เซอร์) แล้วพิมพ์:
setTimeout(() => {debugger;}, 5000)กด Enter และเลื่อนเมาส์เหนือรายการหลังจากเวลาผ่านไป 5 วินาที คุณสามารถดีบั๊ก/ปรับสไตล์ขององค์ประกอบได้
- เปิดแท็บซอร์สโค้ดในเบราว์เซอร์แล้วกด F8