我正在尝试执行 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
- 但这似乎不正确。
最佳答案
尝试这样的事情:
.price__tooltip {
transition: all 0.2s ease-in;
opacity: 0;
[...]
}
.price__text:hover {
&+.price__tooltip{
opacity: 1;
}
}
有了这个,当 .price__text 处于悬停状态时,兄弟 .price__tooltip 应该将他的不透明度设置为 1。
关于使用 BEM 和 Sass 悬停时的 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40655425/