css - 将鼠标悬停在一个元素上会影响多个类合并或级联

Question

我有这个代码

    .card:not(:hover) .movePrevCarousel{   /* Used to make the button appear, when mouse hover*/
      opacity: 0;
    }
    .card:not(:hover) .moveNextCarousel{   /* Used to make the button appear, when mouse hover*/
      opacity: 0;
    }

有没有办法将它合并在一起，而不是写两次？

我试过了

    .card:not(:hover) .movePrevCarousel , .moveNextCarousel{   /* Used to make the button appear, when mouse hover*/
      opacity: 0;
    }

没用

Answer 1

您不能合并它，但您可以使用多个选择器进行相同的更改

.card:not(:hover) .movePrevCarousel,
.card:not(:hover) .moveNextCarousel {
  /* Used to make the button appear, when mouse hover*/
  opacity: 0;
}

如果您使用的是 css 预处理器(如 less、sass)，您可以这样做

.card:not(:hover) {
  .movePrevCarousel,
  .moveNextCarousel {
    /* Used to make the button appear, when mouse hover*/
    opacity: 0;
  }
}

这会产生相同的结果