使用 BEM 和 Sass 悬停时的 CSS 过渡答案

【问题标题】：CSS transition on hover using BEM and Sass使用 BEM 和 Sass 悬停时的 CSS 过渡
【发布时间】：2016-11-17 12:52:07
【问题描述】：

我正在尝试执行 CSS 过渡（opacity:0 到 opacity:1 过渡愉快） - 我正在编写 Sass 并使用 BEM。

我希望利用兄弟运算符+ 来维护我的 Sass 嵌套 BEM 结构。

当用户将鼠标悬停在.price__text 上时，我想将其兄弟元素.price__tooltip 的不透明度设置为1

这里以我的 SCSS 为例

.price {
    &__text {
        [...]
    }
    &__tooltip {
        transition: all 0.2s ease-in;
        opacity: 0;
        [...]
        &+ .price__text:hover {
            opacity: 1;
        }
    }
}

我认为 SCSS 中的最后一个选择器 &+ .price__text:hover 会检测到当兄弟姐妹 .price__text 具有 :hover 伪类时，它会使当前选定元素 .price__tooltip 具有 opacity:1 - 但是这个好像不太对。

【问题讨论】：

标签： css sass bem

【解决方案1】：

试试这样的：

.price__tooltip {
    transition: all 0.2s ease-in;
    opacity: 0;
    [...]
}
.price__text:hover {
      &+.price__tooltip{
        opacity: 1;
      }
}

}

这样，当 .price__text 处于悬停状态时，同级 .price__tooltip 应该将其不透明度设置为 1。

【讨论】：