"ตรวจสอบ" องค์ประกอบที่วางเมาส์เหนือหรือไม่

หมายเหตุ: ฉันอ่านหัวข้อที่คล้ายกัน แต่ไม่มีปัญหาของฉันเลย - ฉันสามารถคลิกขวาที่มันได้ดีจากนั้นก็หายไป

ฉันพบว่า "Inspect Element" เป็นเครื่องมือล้ำค่าใน Chrome อย่างไรก็ตามการจู่โจมครั้งล่าสุดของฉันเมื่อฉันได้เรียนรู้วิธีการใช้เวทมนตร์ที่หลายคนมีอยู่แล้วเห็นว่าฉันสร้างเมนูย่อยสำหรับองค์ประกอบบนแถบนำทางซึ่งจะปรากฏขึ้นด้านล่างเมื่อวางเมาส์เหนือมัน รายการหลัก

ป๊อปอัป (หรือลง) ไม่ค่อยมีสไตล์ที่ฉันต้องการดังนั้นฉันจึงคลิกขวา> ตรวจสอบองค์ประกอบเพื่อดูว่าอะไรมาจากไหนกันแน่และได้รับความคิดที่ดีขึ้นว่าจะบรรลุเอฟเฟกต์ที่ฉันต้องการได้อย่างไร

อย่างไรก็ตามทันทีที่ฉันเลื่อนเมาส์ออกจากเมนูมันก็หายไป

ดังนั้นฉันจึงไม่สามารถเลือกองค์ประกอบที่แตกต่างกันในบานหน้าต่างการตรวจสอบและดูว่าพื้นที่ใดถูกไฮไลต์พร้อมกัน

มีวิธีแก้ปัญหานี้หรือไม่โดยไม่ต้องเปลี่ยนเมนูเพื่อให้ "โผล่ขึ้นมา" เมื่อเปิดใช้งาน

หากการวางเมาส์ถูกกระตุ้นโดย JS เพียงแค่หยุดการเรียกใช้สคริปต์ชั่วคราวผ่านแป้นพิมพ์ นี้เป็นมากวิธีที่ง่ายของการแช่แข็ง DOM กว่าคำตอบอื่น ๆ แนะนำ

นี่คือวิธีที่คุณทำใน Chrome ฉันแน่ใจว่า Firefox มีขั้นตอนที่เทียบเท่า:

1. เปิดเครื่องมือสำหรับนักพัฒนาและไปที่แหล่งที่มา

2. สังเกตทางลัดเพื่อหยุดการเรียกใช้สคริปต์ชั่วคราวF8-

   

3. โต้ตอบกับ UI เพื่อให้องค์ประกอบปรากฏ

4. F8hit
5. ตอนนี้คุณสามารถเลื่อนเมาส์ไปรอบ ๆ ตรวจสอบ DOM ไม่ว่าจะอะไรก็ตาม องค์ประกอบจะอยู่ที่นั่น

หากให้เอhoverฟเฟกต์ด้วยCSSใช่ปกติฉันจะใช้สองตัวเลือกเพื่อรับสิ่งนี้:

หนึ่งเพื่อเมื่อเมาส์ออกจาก: เปิดการตรวจสอบในหน้าต่างเชื่อมต่อและเพิ่มความกว้างจนการเข้าถึงของคุณแล้วคลิกขวาและเมนูป๊อปอัพจะต้องมากกว่าโซนสารวัตร ... แล้วเมื่อคุณเลื่อนเมาส์ไปมุมมองการตรวจสอบ ที่เก็บเปิดใช้งานในเอกสารseehover effecthover area
HTML elementhover effect

สองเพื่อแม้ว่าเมาส์ไม่ได้ในช่วงเปิดการตรวจสอบไปที่และคลิกที่ไอคอนด้านขวาบนที่บอกว่า... (สี่เหลี่ยมผืนผ้าจุดที่มีลูกศร) มีคุณสามารถเปิดใช้งาน(ผู้อื่น) กับ ช่องทำเครื่องหมายให้keephover effectHTML elementStyles TABToggle Element StateHover Event

หากยังไม่ชัดเจนโปรดแจ้งให้เราทราบและฉันสามารถเพิ่มภาพหน้าจอบางส่วนได้ แก้ไข : เพิ่มภาพหน้าจอ

และในที่สุดและอย่างที่ฉันพูดในตอนต้นฉันจะทำได้ก็ต่อเมื่อhoverตั้งค่าด้วยCSS:HOVER... เมื่อคุณควบคุมhover stateด้วยjQuery.onMouseOverเช่นใช้งานได้ (บางครั้ง) เท่านั้นวิธีที่หนึ่ง

หวังว่าจะช่วยได้

สิ่งที่ได้ผลสำหรับฉันคือการเลือกแท็กเฉพาะที่ฉันต้องการตรวจสอบและทำสิ่งนี้:

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

คุณสามารถรีเฟรชเบราว์เซอร์ได้เมื่อทำการตรวจสอบองค์ประกอบเมนูแบบเลื่อนลงเพื่อกลับสู่สถานะปกติ

หวังว่านี่จะช่วยได้ :)

คุณสามารถทำได้ในคอนโซลจาวาสคริปต์:

$('#foo').trigger('mouseover');

สิ่งที่จะ "หยุด" องค์ประกอบในสถานะ "โฮเวอร์"

นี่คือวิธีที่ฉันทำโดยไม่มีการเปลี่ยนแปลง CSS หรือหยุด JS ใน Chrome (ฉันใช้ Mac และไม่มีพีซีอยู่ข้างหน้าฉันหากคุณใช้งาน Win):

1. เปิดคอนโซลนักพัฒนาซอฟต์แวร์ของคุณ
2. อย่าเปิดใช้งานเครื่องมือตรวจสอบการวางเมาส์ แต่ให้เปิดเมนูย่อยที่คุณต้องการโดยเลื่อนเมาส์ไปวาง
3. hit Command+ Shift+ C(Mac) หรือCtrl+ Shift+ C(Win / Linux)

ตอนนี้เครื่องมือตรวจสอบโฮเวอร์จะนำไปใช้กับองค์ประกอบที่คุณเปิดในการนำทางย่อยของคุณ

ไม่แน่ใจว่ามีอยู่ในการแก้ไขเบราว์เซอร์ก่อนหน้านี้หรือไม่ แต่ฉันเพิ่งค้นพบวิธีง่ายๆนี้

เปิดตัวตรวจสอบใน chrome หรือ Firefox คลิกขวาที่องค์ประกอบที่คุณสนใจแล้วเลือกตัวเลือกที่เหมาะสม (ในกรณีนี้: hover) สิ่งนี้จะทริกเกอร์ CSS ที่เกี่ยวข้อง

ภาพหน้าจอจาก Firefox 55 และโครเมียม 61

ของเด็ด!

ขอบคุณ gmo สำหรับคำแนะนำนั้น ฉันไม่รู้ว่าการตั้งค่าแอตทริบิวต์เหล่านั้นมีประโยชน์อย่างมาก

ในการแก้ไขถ้อยคำเล็กน้อยฉันจะอธิบายกระบวนการดังกล่าวดังนี้:

• คลิกขวาที่องค์ประกอบที่คุณต้องการจัดสไตล์

  • เปิดเครื่องมือ 'ตรวจสอบ'

  • ทางด้านขวามือไปที่แท็บสไตล์ขนาดเล็ก

  • พบด้านบนเนื้อหาสไตล์ชีต CSS

  • เลือกตัวเลือก. ฮอฟ - นี่จะเป็นการตั้งค่าทั้งหมดที่มีให้สำหรับองค์ประกอบ HTML ที่เลือก

  • คลิกและเปลี่ยนตัวเลือกทั้งหมดเพื่อไม่ใช้งาน

  • ตอนนี้เลือกสถานะที่คุณต้องการปรับแต่ง - เมื่อเปิดใช้งานสิ่งเหล่านี้สไตล์ชีตของคุณจะนำคุณไปยังการตั้งค่าเหล่านั้นโดยตรง:

สไตล์ - ปรับแต่งฟิลเตอร์ - องค์ประกอบแบบโต้ตอบ

ข้อมูลนี้ช่วยชีวิตฉันได้ไม่น่าเชื่อว่าเพิ่งเคยได้ยินมา!

ฉันจำเป็นต้องทำสิ่งนี้ แต่องค์ประกอบที่ฉันพยายามตรวจสอบถูกเพิ่มและลบแบบไดนามิกตามสถานะโฮเวอร์ขององค์ประกอบอื่น วิธีแก้ปัญหาของฉันคล้ายกับวิธีนี้แต่ก็ไม่ได้ผลสำหรับฉัน

นี่คือสิ่งที่ฉันทำ:

1. เพิ่มสคริปต์ง่ายๆเพื่อเข้าสู่โหมดดีบักเกอร์ตามmouseoverองค์ประกอบที่ทริกเกอร์เหตุการณ์โฮเวอร์ที่คุณกังวล

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. จากนั้นเมื่อคอนโซลนักพัฒนาเปิดอยู่ใน Chrome ให้วางเมาส์เหนือองค์ประกอบของคุณแล้วคุณจะเข้าสู่โหมดดีบักเกอร์ ไปที่ส่วนแหล่งที่มาของเครื่องมือ dev และคลิกปุ่ม "ดำเนินการต่อสคริปต์ต่อ" (ปุ่มเหมือนการเล่นสีน้ำเงินด้านล่าง)

เมื่อคุณดำเนินการดังกล่าว DOM ของคุณจะหยุดชั่วคราวในสถานะโฮเวอร์และคุณสามารถใช้ตัวตรวจสอบองค์ประกอบเพื่อตรวจสอบองค์ประกอบทั้งหมดที่มีอยู่ในสถานะนั้น

เปลี่ยน CSS เพื่อไม่ให้คุณสมบัติที่ซ่อนเมนูใช้ในขณะที่คุณทำงานกับมันคือสิ่งที่ฉันทำ