"Memeriksa" elemen hover?

Catatan: Saya telah membaca utas yang serupa, tetapi tidak ada yang cukup menjadi masalah saya - saya dapat mengeklik kanan dengan baik, kemudian menghilang.

Saya menemukan "Inspect Element" sebagai alat yang sangat berharga di Chrome, namun perampokan terakhir saya saat saya mempelajari cara ajaib yang telah Anda miliki membuat saya membuat sub-menu untuk elemen di bilah navigasi saya, yang muncul di bawah saat mengarahkan kursor ke atasnya item induk.

Popup (atau bawah) tidak cukup bergaya seperti yang saya inginkan, jadi saya klik kanan> inspect elemen untuk melihat apa yang datang dari mana tepatnya, dan mendapatkan ide yang lebih baik tentang bagaimana mencapai efek yang saya inginkan.

Namun, segera setelah saya menjauhkan mouse dari menu, itu hilang.

Jadi saya tidak dapat memilih elemen yang berbeda di panel inspeksi, dan melihat area mana yang disorot pada saat yang bersamaan.

Apakah ada cara untuk mengatasi ini, tanpa mengubah menu sehingga tetap "muncul" setelah diaktifkan?

Jika hoverefeknya diberikan dengan CSSya, saya biasanya menggunakan dua opsi untuk mendapatkan ini:

Satu, untuk seeyang hover effectketika mouse meninggalkan hover area:
Buka inspektur di jendela merapat dan meningkatkan lebar sampai jangkauan Anda HTML element, kemudian klik kanan dan menu popup harus di atas zona inspector ... maka ketika Anda menggerakkan mouse di atas tampilan inspektur , hover effecttetap diaktifkan di dokumen.

Dua, untuk keepitu hover effectbahkan jika mouse tidak atas HTML element, membuka inspektur, pergi ke Styles TABdan klik pada ikon kanan atas yang mengatakan Toggle Element State... (persegi panjang dihiasi dengan panah) Ada Anda dapat secara manual mengaktifkan Hover Event(antara lain) dengan kotak centang disediakan.

Jika tidak jelas sama sekali, beri tahu saya dan saya dapat menambahkan beberapa tangkapan layar. Diedit : tangkapan layar ditambahkan.

Dan akhirnya dan seperti yang saya katakan di awal, saya hanya dapat melakukan ini jika hoverdisetel dengan CSS:HOVER... saat Anda mengontrol hover statedengan jQuery.onMouseOvermisalnya, hanya berfungsi (terkadang), metode Satu.

Semoga membantu.

Jika hover dipicu oleh JS, cukup jeda eksekusi skrip melalui keyboard. Ini adalah cara yang jauh lebih sederhana untuk membekukan DOM daripada yang disarankan jawaban lain.

Inilah cara Anda melakukannya di Chrome. Saya yakin Firefox memiliki prosedur yang setara:

1. Buka Alat Pengembang dan buka Sumber.

2. Perhatikan pintasan untuk menjeda eksekusi skrip— F8.

   

3. Berinteraksi dengan UI untuk memunculkan elemen.

4. Pukul F8.
5. Sekarang Anda dapat menggerakkan mouse, memeriksa DOM, apa pun. Elemen itu akan tetap di sana.

Yang berhasil untuk saya adalah memilih tag tertentu yang ingin saya periksa dan melakukan ini:

Setelah melakukan hal di atas, saya biasanya akan memilih lagi tag itu kemudian dropdown akan secara otomatis tetap apa adanya bahkan ketika saya mengarahkan mouse ke tempat lain seperti Inspect Element, dll.

Anda tinggal menyegarkan browser saat melakukan pemeriksaan elemen menu dropdown untuk kembali ke keadaan normal.

Semoga ini membantu. :)

Anda juga dapat melakukan ini di konsol javascript:

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

Yang akan "membekukan" elemen dalam status "hover".

Inilah cara saya melakukannya tanpa perubahan CSS atau JS berhenti di Chrome (Saya menggunakan Mac dan tidak memiliki PC di depan saya jika Anda menjalankan Win):

1. buka konsol pengembang Anda.
2. jangan mengaktifkan alat inspeksi hover, tetapi buka sub menu yang Anda inginkan dengan menggerakkan mouse di atasnya.
3. tekan Command+ Shift+ C(Mac) atau Ctrl+ Shift+ C(Win / Linux)

sekarang alat inspeksi hover akan diterapkan ke elemen yang telah Anda buka di sub-navigasi Anda.

Tidak yakin apakah itu ada di revisi browser sebelumnya, tetapi saya baru saja menemukan metode yang sangat sederhana ini.

Buka inspektur di chrome atau Firefox, klik kanan pada elemen yang Anda inginkan, dan pilih opsi yang sesuai (dalam hal ini: arahkan kursor). Ini akan memicu CSS terkait.

Tangkapan layar dari Firefox 55 dan chromium 61.

Barang bagus!

Terima kasih atas saran itu. Saya tidak tahu tentang pengaturan atribut yang sangat membantu.

Sebagai revisi kecil pada kata-katanya, saya akan menjelaskan proses itu sebagai berikut:

• Klik kanan pada elemen yang ingin Anda gaya

  • Buka alat 'Inspect'

  • Di sisi kanan, navigasikan ke tab Gaya kecil

  • Ditemukan di atas konten lembar gaya CSS

  • Pilih opsi .hov - Ini akan memberi Anda semua pengaturan yang tersedia untuk elemen HTML yang dipilih

  • Klik dan Ubah semua opsi menjadi tidak aktif

  • Sekarang Pilih keadaan yang ingin Anda ubah - Pada aktivasi salah satu dari ini, Stylesheet Anda akan mengarahkan Anda langsung ke pengaturan tersebut:

Gaya - Filter Tweaking - Elemen interaktif

Informasi ini adalah penyelamat bagi saya, tidak percaya saya baru saja mendengarnya!

ubah CSS sehingga properti yang menyembunyikan menu tidak diterapkan saat Anda mengerjakannya, itulah yang saya lakukan.

Saya perlu melakukan ini, tetapi elemen yang saya coba periksa telah ditambahkan dan dihapus secara dinamis berdasarkan status hover elemen lain. Solusi saya mirip dengan yang ini , tetapi itu tidak berhasil untuk saya.

Jadi inilah yang saya lakukan:

1. Tambahkan skrip sederhana untuk memasuki mode debugger di atas mouseoverelemen yang memicu peristiwa hover yang Anda khawatirkan.

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

2. Kemudian, dengan konsol dev terbuka di Chrome, arahkan kursor ke elemen Anda, dan Anda akan memasuki mode debugger. Arahkan ke bagian sumber alat pengembang, dan klik tombol "Lanjutkan eksekusi skrip" (tombol seperti putar biru di bawah).

Setelah Anda melakukannya, DOM Anda akan dijeda dalam status hover, dan Anda dapat menggunakan pemeriksa elemen untuk memeriksa semua elemen yang ada dalam status tersebut.