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

Question

这是我的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。这两个都没有在悬停时显示.makeprimary元素。正确的语法是什么？感谢

Answer 1

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

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

将编译到此

或者在第二类前面添加&:hover：

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

输出相同。