как высушить (удалить избыточность) из этого объявления селектора класса CSS? - PullRequest
Новая
       4

как высушить (удалить избыточность) из этого объявления селектора класса CSS?

2 голосов
/ 14 октября 2011

У меня есть: 

    .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;
    }

Я уменьшил его до: 

  .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;
}

Можем ли мы оптимизировать дальше?

1 Ответ

1 голос
/ 14 октября 2011

напишите так

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>

, потому что если вы дадите opacity parent, тогда children автоматическиполучите непрозрачность.

проверьте скрипку http://jsfiddle.net/sandeep/axuxT/4/

& Если есть другие children, которые вы не хотите давать opacity, напишите это: 

.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}

Проверьте скрипку http://jsfiddle.net/sandeep/RqP6p/

...