如何根据高度将 CSS 应用于 class 的所有元素？

Question

我正在尝试向图像添加 CSS 过渡，我遵循了 W3 学校示例，但无法弄清楚为什么此示例不起作用。

正在应用悬停设置，但没有任何过渡。我的SCSS如下：

    .rolloverImageContainer {
  opacity: 0;
  background: rgba(#383838, 0.75);
  transition: 0.3;
}

.rolloverImageText {
  outline: 2px solid white;
  outline-offset: -30px;
}

.rolloverImageContainer:hover {
  opacity: 1;
}

感谢您的帮助！

Answer 1

我忘记把's'放在过渡期了......

.rolloverImageContainer {
  opacity: 0;
  background: rgba(#383838, 0.75);
  transition: 0.3;
}

应该是

.rolloverImageContainer {
  opacity: 0;
  background: rgba(#383838, 0.75);
  transition: 0.3s;
}

Answer 2

您需要给 transition-duration 属性秒数 s。

.rolloverImageContainer {
  opacity: 0;
  background: rgba(#383838, 0.75);
  transition: 0.3s;
}

.rolloverImageText {
  outline: 2px solid white;
  outline-offset: -30px;
}

.rolloverImageContainer:hover {
  opacity: 1;
}

如何根据高度将 CSS 应用于 class 的所有元素？

How to apply CSS to all elements of a class based on their height?

sass

css-transitions