Bir vurgulu öğeyi "incelemek" mi?

Not: Benzer konuları okudum, ancak hiçbiri benim sorunum değil - üzerine sağ tıklayabilirim, sadece sonra kaybolur.

"Öğeyi İncele" yi Chrome'da paha biçilmez bir araç buluyorum, ancak birçoğunuzun halihazırda sahip olduğu sihirbazca yöntemleri öğrendiğimde, gezinti çubuğumdaki bir öğe için alt menü oluşturduğumu görüyorum. üst öğe.

Pop-up (veya aşağı) istediğim gibi tasarlanmamış, bu yüzden tam olarak neyin nereden geldiğini görmek için öğeyi sağ tıklıyorum> ve istediğim etkiyi nasıl elde edeceğime dair daha iyi bir fikir ediniyorum.

Ancak, faremi menüden uzaklaştırır çıkarmaz kayboluyor.

Bu yüzden inceleme bölmesinde farklı öğeler seçemiyorum ve aynı anda hangi alanın vurgulandığını göremiyorum.

Menüyü değiştirmeden, etkinleştirildikten sonra "açılır" olarak kalmasının bir yolu var mı?

Eğer hoveretkisi ile verilir CSSo zaman evet, normalde bunu almak için iki seçenekleri kullanın:

Bir, için fare ayrılırken : demirledi pencerede aç müfettişi ve ulaşma, günlük dek genişliğini arttırmak , daha sonra sağ tıklayın ve açılan menü müfettiş bölge üzerinde olmalıdır ... o zaman müfettiş görüntüsü üzerine fareyi hareket , belgede aktif durumda kalsın.seehover effecthover area
HTML elementhover effect

İki, hiç fare üzerinde olmasa bile , gidin denetçisini açın ve der sağ üst simgeye tıklayın Eğer var aktive elle yapabilirsiniz (bir ok ile noktalı dikdörtgen) ... (diğerleri) ile onay kutusu sağlandı.keephover effectHTML elementStyles TABToggle Element StateHover Event

Hiç net değilse bana bildirin ve birkaç ekran görüntüsü ekleyebilirim. Düzenlendi : ekran görüntüsü eklendi.

Ve son olarak ve başlangıçta söylediğim gibi, bunu sadece ile hoverayarlanmışsa yapabilirim CSS:HOVER... örneğin hover stateile kontrol ettiğinizde jQuery.onMouseOver, sadece çalışır (bazen), yöntem Bir.

Umarım yardımcı olur.

Fareyle üzerine gelme JS tarafından tetiklenirse, klavye aracılığıyla komut dosyasının yürütülmesini duraklatmanız yeterlidir. Bu, DOM'u dondurmanın diğer yanıtların önerdiğinden çok daha basit bir yoludur.

İşte bunu Chrome'da nasıl yapacağınız. Eminim Firefox'ta eşdeğer bir prosedür vardır:

1. Geliştirici Araçlarını açın ve Kaynaklar'a gidin.

2. Komut dosyası yürütmeyi duraklatmak için kısayolu not edin— F8.

   

3. Öğenin görünmesini sağlamak için kullanıcı arayüzü ile etkileşim kurun.

4. Hit F8.
5. Artık farenizi hareket ettirebilir, DOM'u inceleyebilirsiniz, ne olursa olsun. Eleman orada kalacak.

Benim için işe yarayan şey, incelemek istediğim belirli bir etiketi seçmek ve bunu yapmak:

Yukarıdakileri yaptıktan sonra, normal olarak bir etiketi seçerdim, ardından fareyi Denetle Öğesi vb. Gibi başka yerlere geldiğimde bile açılır menü otomatik olarak olduğu gibi kalacaktır.

Normal duruma dönmek için menü açılır öğelerini incelerken tarayıcıyı yenileyebilirsiniz.

Bu yardımcı olur umarım. :)

Bunu javascript konsolunda da yapabilirsiniz:

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

Öğeyi "üzerine gelme" durumunda "donduracak".

Chrome'da CSS değişikliği veya JS duraklaması olmadan bunu nasıl yapıyorum (Mac'teyim ve Win üzerinde çalıştırıyorsanız önümde bir PC yok):

1. geliştirici konsolunuzu açık tutun.
2. fareyle denetleme aracını henüz etkinleştirmeyin, bunun yerine farenizi üzerine getirerek istediğiniz alt menüyü açın.
3. Command+ Shift+ C(Mac) veya Ctrl+ Shift+ C(Win / Linux) tuşuna basın

artık fareyle üzerine gelindiğinde inceleme aracı, alt gezinme özelliğinizde açtığınız öğelere uygulanacaktır.

Önceki tarayıcı revizyonlarında mevcut olup olmadığından emin değilim, ancak bu son derece basit yöntemi yeni buldum.

Denetçiyi Chrome veya Firefox'ta açın, ilgilendiğiniz öğeye sağ tıklayın ve uygun seçeneği seçin (bu durumda: üzerine gelin). Bu, ilişkili CSS'yi tetikleyecektir.

Firefox 55 ve chromium 61'den ekran görüntüleri.

Mükemmel şeyler!

Bu tavsiye için gmo'ya teşekkür ederim. Bu özellik ayarlarının çok yararlı olduğunu bilmiyordum.

İfadede küçük bir revizyon olarak bu süreci şu şekilde açıklayacağım:

• Biçimlendirmek istediğiniz öğeye sağ tıklayın

  • "İnceleme" aracını aç

  • Sağ tarafta, küçük Stiller sekmesine gidin

  • CSS stil sayfası içeriğinin üzerinde bulundu

  • .Hov seçeneğini seçin - Bu size seçili HTML öğesi için mevcut tüm ayarları verecektir.

  • Devre dışı bırakmak için tüm seçenekleri tıklayın ve değiştirin

  • Şimdi ince ayar yapmak istediğiniz durumu seçin - Bunlardan herhangi biri etkinleştirildiğinde, Stil Sayfanız sizi doğrudan bu ayarlara atlayacaktır:

Stiller - İnce Ayar Filtreleri - Etkileşimli öğeler

Bu bilgi benim için bir cankurtaran oldu, şimdi duyduğuma inanamıyorum!

Bunu yapmam gerekiyordu, ancak incelemeye çalıştığım öğe başka bir öğenin üzerine gelme durumuna göre dinamik olarak eklendi ve kaldırıldı. Benim çözümüm benzer bu bir , ama bu oldukça benim için çalışmadı.

İşte yaptığım şey:

1. İlgilendiğiniz üzerine mouseovergelme olayını tetikleyen öğenin hata ayıklayıcı moduna girmek için basit bir komut dosyası ekleyin .

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

2. Ardından, geliştirici konsolu Chrome'da açıkken öğenizin üzerine gelin ve hata ayıklayıcı moduna gireceksiniz. Geliştirici araçlarının kaynaklar bölümüne gidin ve "Komut dosyası yürütmeye devam et" düğmesini tıklayın (aşağıdaki mavi oynatmaya benzer düğme).

Bunu yaptığınızda, DOM'nuz fareyle üzerine gelme durumunda duraklatılır ve bu durumda bulunan tüm öğeleri incelemek için öğe denetçisini kullanabilirsiniz.

CSS'yi, siz üzerinde çalışırken menüyü gizleyen özellik uygulanmayacak şekilde değiştirin.