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

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 伪 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。

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

CSS transition on hover using BEM and Sass

css

sass

bem