在罗盘中写条件语句

Question

我有以下4个班级。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在我想要的是在COMPASS / SCSS中编写一个条件语句，它检测何时挂起.editor-item-wrapper。当它徘徊时，我希望编辑项目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;
     }
   }