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

【问题标题】：How to apply CSS to all elements of a class based on their height?如何根据高度将 CSS 应用于类的所有元素？
【发布时间】：2019-06-28 17:27:56
【问题描述】：

我正在尝试向图像添加 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;
}

感谢您的帮助！

【问题讨论】：

标签： sass css-transitions

【解决方案1】：

你需要给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;
}

【讨论】：

【解决方案2】：

过渡期忘记加s了……

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

应该是

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

【讨论】：