I have:
.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;
}
I took it down to:
.sketch_im开发者_开发百科g_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;
}
Can we optimize further?
write like this
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>
because if you give opacity
the parent
then children
automatically get the opacity.
check the fiddle http://jsfiddle.net/sandeep/axuxT/4/
& If there are others children
which you didn't want to give opacity
then write this:
.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}
Check the fiddle http://jsfiddle.net/sandeep/RqP6p/
精彩评论