CSS altyazıdaki çocuk öğelerini hafifletir

Question

işte benim sorunum.
div, diğer iki divs içerir: temelde başlık için, biri içerik için. İsterdim

(değişim alfa seviyesi, ya da başka bir yöntem karşılandı) hafifletmek için, kullanıcı noktası ana div fare. Her iki çocuğun divs'un renkleri de değişmeli ve biraz daha hafif olmalıdır. Mümkünse javascript'ten kaçınmak istiyorum.

Bunu CSS'de nasıl yapabilirim?

Answer 1

Bunu beğendiniz mi?

Live Demo

İlgili CSS:

#container:hover .inner { 
    opacity: 0.8 
} 

HTML:

<div id="container"> 
    <div id="left" class="inner"></div> 
    <div id="right" class="inner"></div> 
</div> 

Alakasız CSS:

#container { 
    width: 300px; 
    padding: 30px; 
    overflow: hidden 
} 

.inner { 
    width: 40%; 
    height: 250px; 
    background: #ccc 
} 
#left { 
    float: left 
} 
#right { 
    float: right 
} 

Gerçekten Alakasız CSS:

#container { 
    background: #fcecfc; /* old browsers */ 
    background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* firefox */ 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(51%,#fd89d7), color-stop(100%,#ff7cd8)); /* webkit */ 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0); /* ie */ 
} 

Answer 2

#div:hover #div1{ 
    color:#lightercolor; 
    } 
    #div:hover #div2{ 
    color:#lightercolor; 
    } 

Answer 3

#div'i kullanabilirsiniz: vurgulu, belki?

#parent_div:hover #child_div_1 { background-color: #333; } 
#parent_div:hover #child_div_2 { background-color: #666; }