更改psuedo类上的多个类的显示悬停

时间:2016-03-23 23:24:48

标签: css sass

这是我的scss文件

  .image-container {
    position: relative;
    .delete-image {
      display: none;
      position: absolute;
      top: 0px;
      right: 0px;
    }
    .make-primary {
      display: none;
      position: absolute;
      top: 0px;
      right: 97px;
    }
    &:hover .delete-image {
      display: block;
      }
  }

我希望.make-primary.delete-image都将display属性更改为在悬停时阻止。

我试过了:

&:hover .delete-image .make-primary{
          display: block;
          }

&:hover .delete-image, .make-primary {
          display: block;
          }

第一个,不显示任何元素,第二个将在悬停时显示.delete-image,并始终显示.make-primary。这些都没有在悬停时显示.make-primary元素。 什么是正确的语法?感谢

1 个答案:

答案 0 :(得分:1)

将两个类选择器都放在&:hover

&:hover{
    .delete-image, .make-primary {
        display: block;
     }
}

那将编译为this

或者在第二节课前添加&:hover

&:hover .delete-image, &:hover .make-primary {
   display: block;
}

使用same output