2012-01-19 27 views
8

en Aşağıdaki kodu var diyelim: Bir sarmalayıcı için vurgulu üzerindeCss vurgulu, ebeveyn ve çocuk

<div class="wrapper"> 
<div class="title"></div> 
<div></div> 
</div> 

<div class="wrapper"> 
<div class="title"></div> 
<div></div> 
</div> 

<div class="wrapper"> 
<div class="title"></div> 
<div></div> 
</div> 

buna arka plan rengi değiştirmek için çocuğa başlık div var istiyorum. Bunu saf css'de yapabilir miyim? Js'de bunu nasıl yapacağımı biliyorum. Bunun için saf bir CSS yöntemi var mı?

Teşekkürler

cevap

20

Evet, bunu yapabilirsiniz. bu sadece:

.wrapper:hover .title{ 
    background-color: #f00; 
} 

DÜZENLEME:
IE6 :hover sadece a üzerinde -elemanları tanıdığı olduğunu, dolayısıyla bu işe yaramaz lütfen - ama o berbat eski şeyle uğraşmak zorunda kalmam .

+2

Sadece beni alt, burada çalışan bir örnek: http://jsfiddle.net/esBrF/ –

+0

@James: Bunun için teşekkürler, ben bir keman kendim oluşturmak üzereydim;) – oezi

+0

teşekkürler çocuklar;) Harika çalışıyor! –

4

Bu konuda ne düşünüyorsunuz?

.wrapper:hover .title { 
    background-color: blue; 
} 
İlgili konular