comment DRY up (supprimer la redondance) de cette déclaration de sélecteur de classe css?

Question

J'ai:

.sketch_img_thumb_box .title{ 
     opacity: 0.1; 
    } 
    .sketch_img_thumb_box:hover .title{ 
     opacity: 1; 
    } 

    .sketch_img_thumb_box .artist{ 
     opacity: 0.1; 
    } 
    .sketch_img_thumb_box:hover .artist{ 
     opacity: 1; 
    } 


    .sketch_img_thumb_box .rating_bar { 
     opacity: 0.1; 
    } 
    .sketch_img_thumb_box:hover .rating_bar { 
     opacity: 1; 
    } 

je l'ai pris jusqu'à:

.sketch_img_thumb_box .title, .sketch_img_thumb_box .artist, .sketch_img_thumb_box .rating_bar{ 
    opacity: 0.1; 
} 
    .sketch_img_thumb_box:hover .title, .sketch_img_thumb_box:hover .artist, .sketch_img_thumb_box:hover .rating_bar{ 
    opacity: 1; 
} 

Peut-on optimiser?

Answer 1

écrire comme ce

css:

.sketch_img_thumb_box{ 
     opacity: 0.1; 
    } 
    .sketch_img_thumb_box:hover{ 
     opacity: 1; 
    } 

html:

<div class="sketch_img_thumb_box"> 
    <div class="title"></div> 
    <div class="artist"></div> 
    <div class="rating_bar"></div> 
</div> 

parce que si vous donnez le opacityparent puis children automatiquement obtenir l'opacité.

vérifier le violon http://jsfiddle.net/sandeep/axuxT/4/

& S'il y a d'autres children que vous ne vouliez pas donner opacity puis écrire ceci:

.no_bar{width:50px;height:50px;margin:5px;} 
.sketch_img_thumb_box > *{opacity:0.1;display:inline-block;} 
.sketch_img_thumb_box:hover > *{opacity:1} 
.no_bar{background:black;opacity:1} 

Vérifiez le violon http://jsfiddle.net/sandeep/RqP6p/