सीएसएस हल्के माउसओवर पर बाल तत्व

Question

यहां मेरी समस्या है।
मेरे पास div है जिसमें दो अन्य divs शामिल हैं: मूल रूप से हेडर के लिए एक, सामग्री के लिए एक।

मैं चाहता (परिवर्तन अल्फा स्तर, या किसी अन्य विधि का स्वागत किया जाता है) हल्का, जब उपयोगकर्ता अंक माता पिता div पर माउस। बच्चे divs दोनों के रंग बदलना चाहिए और थोड़ा हल्का होना चाहिए। यदि संभव हो तो मैं जावास्क्रिप्ट से बचना चाहता हूं।

सीएसएस में यह कैसे करें?

Answer 1

इस तरह?

Live Demo

प्रासंगिक सीएसएस:

#container:hover .inner { 
    opacity: 0.8 
} 

HTML:

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

अप्रासंगिक सीएसएस:

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

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

सही मायने में अप्रासंगिक सीएसएस:

#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: होवर, शायद उपयोग कर सकते हैं?

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