在指南針中寫入條件語句

Question

我有以下4個類。

.editor-item{@extend .popover-icons; margin:10px auto;} 
 
.editor-item-photobook {@extend .editor-item; background-position:-15px -19px; } 
 
.editor-item-desc{ color:$white; width:98%; margin:0 auto;} 
 

 
.editor-item-wrapper{ 
 
    border:1px solid $editor-menu-border; @include border-radius(2px); 
 
    padding:15px; width:96px; height:96px; background-color:$editor-menu-background; 
 
    &:hover{border:1px solid $hightlighteBorderInside-blue-fill; background- 
 
    color: $hightlighteBorderInside-blue-fill; @include transition-duration(0.5s);}}

現在，我要的是寫在COMPASS/SCSS，當。編輯項，包裝懸停在檢測條件語句。當它被擱置時，我希望editor-item-desc淡出30％。任何想法如何做到這一點？

Answer 1

我還沒有看到你的HTML，但這裏是我大概會怎麼對待事物：

1. 設置懸停在.editor-item-wrapper。
2. 準備.editor-item-desc上的不透明度轉變。

3. 訪問.editor-item-desc在懸停和控制淡出。

   .editor-item-desc { 
       transition: 0.5s opacity; 
   } 
   
   .editor-item-wrapper { 
       ... 
       &:hover .editor-item-desc { 
       opacity: 0.3; 
       } 
   }