css: hover sözde sınıfı çalışmıyor

Herhangi bir sonuç üretmeyen bir CSS :hover sözde sınıf var.css: hover sözde sınıfı çalışmıyor

Bazı resim galerisi kodlarıyla uğraşıyordum ve çalışmayan bu snippet'i almayı başardım. Nedenini anlayamıyorum. Buradaki boyutlar, normalde resimler içerdiğinden, buradaki büyüklükteki CSS kurallarından bazıları. Basitlik için görüntüleri kaldırdım, ancak aynı sayfada bulunan

diğer :hover öğeleri.

Sorun hakkında başka ne söyleyeceğime emin değilim, çünkü bu çok basit. Muhtemelen gerçekten bariz bir şey eksik. Burada

JSFiddle - http://jsfiddle.net/GbxCM/

kaynak

2012-09-11 iabw

Sanırım bir galeri yapmaya çalışıyorsunuz ve vurguluda bir görüntü içeren divun tam ekrana geçmesini sağlamak için CSS'yi kullanın. Bunu yapmak için mevcut bir JavaScript galerisini kullanırdım ... – mb21

Sadece CSS ile yapmanın bir yolunu bulmaya çalışıyordum. – iabw

Bir sonraki ve bir önceki düğüme sahip olmak isterseniz, bir şekilde JavaScript'i kullanarak bitirebilirsiniz. Ve tüm önemli tarayıcılarda test edilmiş mevcut çözümler varsa, tekerleği yeniden icat edin. Bir çok insanın kullanabileceği bir şey http://lokeshdhakar.com/projects/lightbox2/ – mb21

bazı durumlarda (çoğunlukla absolute konumlandırma ile), bir uygulayamazsınız :hover Sözde sınıf display: inline-block; ile ölçüm.

Yani, float: left; ile bu Devam etti ve yerini - (haber, mükemmel çalışacak tarayıcı sadece :hover kendisi kaydetmez Eğer Chrome varsa öğeyi denetle kullanmak ve :hover kendini trait ekleyin!.) bir kenar boşluğu ekledi (inline-block görünümünü simüle etmek için) ve br'u clear olarak değiştirin. Sonuç this jsFiddle’dur.

kaynak

2012-09-11 00:43:26 Eric

Orijinal olarak bunları satır içi bloklar haline getirdim, böylece içerilen resimlere otomatik olarak yeniden boyutlandırılacaklardı, ancak bu, uğraştığım diğer galeri stillerinden biriydi. Bu doğru - kesinlikle konumlandırılmadı. Bence şamandıra burada çalışacak ve kendimi düşünmemek için biraz aptal hissediyorum. Onaylayıp test ettikten sonra kabul edeceğim. – iabw

Eric, bu uyumsuzluğun nedenini biliyor musunuz: vurgulu, mutlak ve satır içi bloğu? Bu bir standart mı ve neden? Bu "bug" hakkında hiçbir bilgi bulamıyorum. – iabw

Ayrıca herhangi bir resmi rapor bulamıyorum.Sanırım yanlış şeyi araştırıyorum. Belki de 'göreceli' konumlandırma, 'mutlak' konumlandırma için herhangi bir olayı emebilir diye düşünüyorum. Tamamen bir tahmin. – Eric

Ne yapmaya çalışıyorsun doğru neyi tahmin ediyorum, o zaman konumlandırma veya bunların hiçbirini değiştirmeye gerek yoktur. Yapmak istediğinizi görebileceğim tek değişiklik, arka plan rengini değiştirmektir. İşte

Here's the fiddle I made to clarify that response. okunabilirliği aşkına kod:

HTML

<div class="wrapper"> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <br> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
</div>

CSS

.wrapper { 
    height: 600px; 
    width: 600px; 
    overflow: hidden; 
    position: relative; 
} 

.squareswrapsolo { 
    height: 100px; 
    width: 100px; 
    display: inline-block; 
    overflow: hidden; 
    background: #ccc; 
} 
.squareswrapsolo:hover { 
    background: #000; 
}

kaynak

2012-09-11 00:38:54 cereallarceny

Kodunuz çalışmıyor gibi görünüyor; Ancak, bağlantı kurduğunuz keman işe yaramıyor. Orijinaline bağlısın. –

Whoops! Düzeltildi, teşekkürler Josh. – cereallarceny

css: hover sözde sınıfı çalışmıyor

cevap

İlgili konular