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

Question

我正在尝试执行 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 psuedo class 它将使当前选定的元素 .price__tooltip 具有 opacity:1 - 但这似乎不正确。

Answer 1

尝试这样的事情:

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

有了这个，当 .price__text 处于悬停状态时，兄弟 .price__tooltip 应该将他的不透明度设置为 1。