Lihat: arahkan kursor di Alat Pengembang Chrome

Saya ingin melihat :hovergaya untuk jangkar yang saya gunakan di Chrome . Di Firebug , ada dropdown gaya yang memungkinkan saya untuk memilih status yang berbeda untuk suatu elemen.

Sepertinya saya tidak dapat menemukan yang serupa di Chrome. Apakah saya melewatkan sesuatu?

Sekarang Anda bisa melihat aturan pseudo-class dan memaksanya pada elemen.

Untuk melihat aturan seperti :hoverdi panel Styles klik :hovteks kecil di kanan atas.

Untuk memaksa suatu elemen ke :hoverkeadaan, klik kanan dan pilih :hover.

Kiat tambahan pada panel elemen di Pintasan Alat Pengembang Chrome .

EDIT: Jawaban ini sebelum perbaikan bug, lihat jawaban tnothcutt.

• Klik kanan elemen, tetapi JANGAN pindahkan penunjuk tetikus Anda menjauh dari elemen, pertahankan dalam keadaan melayang.
• Pilih elemen periksa melalui keyboard, seperti pada panah tekan dan kemudian tombol Enter.
• Lihat di alat pengembang di bawah Aturan CSS yang Cocok, Anda seharusnya dapat melihat: melayang.

PS: Saya mencoba ini di salah satu tag pertanyaan Anda.

Saya ingin melihat status hover pada tooltips Bootstrap saya. Memaksa status: hover di Chrome dev Tools tidak membuat output yang diperlukan, namun memicu aktivitas mouseenter melalui konsol melakukan trik di Chrome. Jika jQuery ada di halaman Anda dapat menjalankan:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Ada beberapa cara untuk melihat gaya HOVER STATE di Alat Pengembang Chrome.

Metode 01

Metode 02

Dengan Tolong Pengembang Default Firefox

Dengan Firebug

Jika itu membantu, ini tampaknya lebih mudah di Chrome terbaru (47.0.2526.106):

Periksa elemen dan kemudian klik pada tiga titik putih di selokan kiri:

Kemudian pilih status elemen yang diinginkan dari dropdown ini:

Saya tidak berpikir ada cara untuk melakukan ini. Saya mengirimkan permintaan fitur . Jika ada cara, para pengembang di Google akan bermuka masam menunjukkannya dan saya akan mengedit jawaban saya. Jika tidak, kita harus menunggu dan menonton. (Anda dapat membintangi masalah untuk memilihnya)

Komentar 1 oleh anggota proyek Chrome : Di 10.0.620.0, panel Styles menunjukkan: hover styles untuk elemen yang dipilih tetapi tidak: aktif.

(pada pos ini) Versi saluran Stabil Saat Ini adalah 8.0.552.224.

Anda dapat mengganti instalasi saluran Stabil Google Chrome Anda dengan saluran Beta atau saluran Dev (Lihat Saluran Rilis Akses Awal ).

Anda juga dapat memasang pemasangan krom sekunder yang bahkan lebih baru daripada saluran Dev .

... Bangunan Canary diperbarui bahkan lebih sering daripada saluran Dev dan tidak diuji sebelum dirilis. Karena build Canary kadang-kadang tidak dapat digunakan, itu tidak dapat ditetapkan sebagai browser default Anda dan dapat diinstal sebagai tambahan dari salah satu saluran Google Chrome di atas. ...

Saya tahu bahwa apa yang saya lakukan adalah solusinya, namun ia bekerja dengan sempurna dan itulah cara saya melakukannya setiap saat.

Kemudian, lanjutkan seperti ini:

• Pertama-tama pastikan Alat Pengembang Chrome tidak terkunci.
• Kemudian, gerakkan saja sisi mana saja dari jendela Alat Dev ke tengah elemen yang ingin Anda periksa saat melayang.

• Akhirnya, arahkan elemen, klik kanan dan periksa elemen, gerakkan mouse Anda ke jendela Dev Tools dan Anda akan dapat bermain dengan elemen Anda: hover css.

Bersulang!

Saya sedang men-debug status menu hoverdengan Chrome dan melakukan ini untuk dapat melihat kode status hover:

Di Elementspanel klik Toggle Element statetombol dan pilih :hover.

Di Scriptspanel pergi ke Event Listeners Breakpointsdi bagian kanan bawah dan pilih Mouse -> mouseup.

Sekarang periksa Menu dan pilih kotak yang Anda inginkan. Saat Anda melepaskan tombol mouse, mouse harus berhenti dan menampilkan status elemen hover yang dipilih di Elementspanel (lihat Stylesbagian).

Mengubah untuk mengarahkan status di Chrome cukup mudah, cukup ikuti langkah-langkah di bawah ini:

1) Klik kanan di halaman Anda dan pilih periksa

2) Pilih elemen yang ingin Anda periksa di DOM

3) Pilih ikon pin (Toggle Element State)

4) Kemudian centang hover

Sekarang Anda dapat melihat keadaan mengambang dari DOM yang dipilih di browser!

Saya bisa melihat gaya dengan mengikuti langkah-langkah di bawah ini yang disarankan oleh Babiker - "Elemen klik kanan, tapi JANGAN pindahkan penunjuk tetikus Anda menjauh dari elemen, simpan dalam keadaan melayang. Pilih elemen yang diperiksa melalui keyboard, seperti pada panah tekan ke atas dan lalu masukkan kunci. "

Untuk mengubah gaya ikuti langkah-langkah di atas dan kemudian - Ubah tab browser Anda dengan menekan ctrl + TAB pada keyboard. Kemudian klik kembali pada tab yang ingin Anda debug. Layar hover Anda akan tetap ada. Sekarang hati-hati bawa mouse Anda ke area alat pengembang.

Dalam kasus saya, saya ingin memberi dubt tooltip bootstrap. Tetapi metode di atas tidak bekerja untuk saya. Saya kira bootstrap menerapkan ini dengan sesuatu seperti event mouse in / out.

Lagi pula, ketika saya mengarahkan tombol, itu akan menghasilkan elemen html saudara di bawah tombol, jadi saya pilih elemen induk tombol di tab "Elemen" pada jendela "Alat pengembang", arahkan tombol, dan "Ctrl + C", maka saya dapat menempelkan kode sumber yang berisi kode yang dihasilkan. Terakhir temukan kode yang dihasilkan, dan tambahkan ke kode sumber dengan "Edit as HTML" di tab "Elements".

Semoga bisa membantu seseorang.

Saya pikir ini bukan lagi masalah di Chrome tetapi untuk berjaga-jaga. Saya menulis skrip jQuery ini untuk memeriksa DOM ketika saya berpindah dengan kunci TAB.

Jika diubah menggunakan 'mouseover', akan terlihat seperti ini:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

Anda dapat dengan mudah memodifikasinya untuk menghapus event handler setiap kali Anda mengklik atau melakukan sesuatu pada elemen yang ingin Anda hentikan.