Bkz: Chrome Geliştirici Araçları'nda fareyle üzerine gelme durumu

Chrome'da:hover üzerinde durduğum bir çapanın stilini görmek istiyorum . In Firebug bana bir element için farklı durumları seçmenize olanak tanıyan bir stil açılır var.

Chrome'da benzer bir şey bulamıyorum. Bir şey mi kaçırıyorum?

Şimdi hem sözde sınıf kurallarını görebilir hem de öğeleri zorlayabilirsiniz.

:hoverStiller bölmesinde olduğu gibi kuralları görmek için :hovsağ üstteki küçük metni tıklayın .

Bir öğeyi :hoverduruma zorlamak için, öğeyi sağ tıklayın ve öğesini seçin :hover.

Ek ipuçları elemanları panelinde yer Chrome Geliştirici Araçları Kısayollar .

DÜZENLEME: Bu yanıt hata düzeltmesinden önceydi, bkz. Tnothcutt'ın yanıtı.

• Öğeyi sağ tıklayın, ancak fare işaretçinizi öğeden uzağa hareket ettirmeyin, fareyle üzerine gelin.
• Yukarı ok ve sonra Enter tuşuna olduğu gibi, klavye ile öğeyi denetle'yi seçin.
• Eşleşen CSS Kuralları altındaki geliştirici araçlarına bakın, şunu görebilmeniz gerekir: üzerine gelin.

Not: Bunu soru etiketlerinizden birinde denedim.

Fareyle üzerine gelme durumunu Bootstrap araç ipuçlarında görmek istedim. Chrome dev Tools'ta: hover durumunu zorlamak gerekli çıktıyı oluşturmadı, ancak mouseenter olayını konsoldan tetiklemek Chrome'daki hile yaptı. Sayfada jQuery varsa çalıştırabilirsiniz:

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

Chrome Geliştirici Araçları'nda HOVER STATE stillerini görmenin birkaç yolu vardır .

Yöntem 01

Yöntem 02

Firefox Varsayılan Geliştirici Ücreti ile

Firebug ile

Yardımcı olması durumunda, en son Chrome'da (47.0.2526.106) bu daha kolay görünüyor:

Elemanı inceleyin ve ardından sol oluktaki üç beyaz noktayı tıklayın:

Ardından bu açılır menüden istediğiniz öğe durumunu seçin:

Bunu yapmanın bir yolu olduğunu sanmıyorum. Bir özellik isteği gönderdim . Bir yol varsa, Google'daki geliştiriciler bunu somut bir şekilde gösterecek ve cevabımı düzenleyeceğim. Değilse, beklemek ve izlemek zorundayız. (konuya oy vermek için yıldız ekleyebilirsiniz)

Chrome proje üyesi tarafından Yorum 1 : 10.0.620.0'da Stiller paneli, seçilen öğe için: fareyle üzerine gelme stillerini gösterir, ancak: etkin değil.

(bu yazıdan itibaren ) Mevcut Kararlı kanal sürümü 8.0.552.224'tür.

Eğer yerini alabilecek ürün kanalı ile Google Chrome kurulumunu Beta kanalına veya Dev kanalı (Bkz Erken Erişim Sürüm Kanalları ).

Ayrıca Dev kanalından daha güncel bir ikincil krom yüklemesi de yükleyebilirsiniz .

... Kanarya yapısı Dev kanalından daha sık güncellenir ve yayınlanmadan önce test edilmez. Canary derlemesi bazen kullanılamayabileceğinden, varsayılan tarayıcınız olarak ayarlanamaz ve yukarıdaki Google Chrome kanallarından herhangi birine ek olarak yüklenebilir. ...

Yaptığım şeyin oldukça geçici olduğunu biliyorum, ancak mükemmel çalışıyor ve bunu her zaman yapıyorum.

Ardından şu şekilde devam edin:

• İlk olarak Chrome Geliştirici Araçları'nın kaldırıldığından emin olun.
• Ardından, Geliştirme Araçları penceresinin herhangi bir tarafını, üzerine geldiğinizde incelemek istediğiniz öğenin ortasına getirin.

• Son olarak, öğenin üzerine gelin, öğeyi sağ tıklayın ve inceleyin, farenizi Geliştirme Araçları penceresine getirin ve öğenizle oynayabileceksiniz: hover css.

Şerefe!

hoverChrome ile bir menü durumunda hata ayıklama yaptım ve fareyle üzerine gelme durum kodunu görmek için bunu yaptım:

Gelen Elementspaneli üzerine tıklayın Toggle Element statedüğmesini seçin :hover.

In Scriptspaneline gidin Event Listeners Breakpointssağ alt bölümünde seçin Mouse -> mouseup.

Şimdi Menüyü inceleyin ve istediğiniz kutuyu seçin. Fare düğmesini bıraktığınızda, durmalı ve Elementspanelde seçili öğenin üzerine gelme durumunu göstermelidir ( Stylesbölüme bakın).

Chrome'da fareyle üzerine gelme durumunu değiştirmek oldukça kolaydır, aşağıdaki adımları izlemeniz yeterlidir:

1) Sayfanızı sağ tıklayın ve incelemeyi seçin

2) İçinde incelemek sahip olmak ister öğeyi seçin DOM

3) Raptiye simgesini seçin (Eleman Durumunu Değiştir)

4) Ardından fareyle üzerine gelin

Şimdi seçilen DOM'un fareyle üzerine gelme durumunu tarayıcıda görebilirsiniz!

Babiker tarafından önerilen aşağıdaki adımları izleyerek stili görebiliyordum - "Öğeyi sağ tıklayın, ancak fare işaretçinizi öğeden uzağa hareket ettirmeyin, üzerine gelindiğinde tutun. Yukarı ok ve sonra Enter tuşuna basın. "

Stili değiştirmek için yukarıdaki adımları uygulayın ve ardından - Klavyede ctrl + SEKME tuşlarına basarak tarayıcı sekmenizi değiştirin. Sonra hata ayıklamak istediğiniz sekmeyi tıklayın. Fareyle üzerine gelme ekranınız hala orada olacak. Şimdi farenizi geliştirici araç alanına dikkatlice götürün.

Benim durumumda, bootstrap araç ipucunu dubug etmek istiyorum. Ancak yukarıdaki yöntemler benim için işe yaramıyor. Sanırım bootstrap fare giriş / çıkış olayı gibi bir şey tarafından uygulandı.

Her neyse, bir düğmenin üzerine geldiğimde düğmenin altında bir kardeş html öğesi oluşturacak, bu yüzden düğmenin üst öğesini "Geliştirici araçları" penceresinin "Öğeler" sekmesinden seçiyorum, düğmeyi ve "Ctrl + C" sonra oluşturulan kodu içeren kaynak kodunu yapıştırabilirsiniz. Son olarak oluşturulan kodu bulun ve "Elements" sekmesindeki "HTML olarak düzenle" ile kaynak koduna ekleyin.

Umarım birine yardımcı olabilir.

Bence bu artık Chrome'da bir sorun değil, her ihtimale karşı. SEKME tuşu ile hareket ederken DOM incelemek için bu jQuery komut dosyası yazdım .

'Fareyle üzerine gelme' kullanılacak şekilde değiştirilirse şöyle görünür:

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

Durdurmak istediğiniz öğeye her tıkladığınızda veya bir şey yaptığınızda olay işleyiciyi kaldırmak için bunu kolayca değiştirebilirsiniz.