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

Answer 1

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

中

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

那将编译为this

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

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

使用same output。

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

1 个答案: