SCSS:父级悬停选择器
SCSS:父级悬停选择器
提问于 2016-05-11 05:08:27
在scss中，我们可以使用父选择器类：
<div class="parent is-active">
<div class="children"></div>
</div>
.parent {
width: 200px;
height: 200px;
}
.children {
height: 100px;
width: 100px;
.is-active & {
background: red;
}
}如何编写父hover选择器？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-05-11 05:15:22
如果我没理解错你的问题：https://jsfiddle.net/wx9L9jzj/3/
SCSS:
.parent {
width: 200px;
height: 200px;
}
.children {
height: 100px;
width: 100px;
.is-active & {
background: red;
}
:hover > & {
background: blue;
}
}请注意，:hover > & SCSS选择器实际上是查看父节点，以确定子节点是否在:hover伪类中。这不是标准的CSS，需要将SASS语法编译成标准的CSS，而SASS是通过重写选择器来实现的。
每个 的
父选择器&是Sass发明的一种特殊选择器，用于嵌套选择器中引用外部选择器。它使得以更复杂的方式重用外部选择器成为可能，比如添加伪类或在父选择器之前添加选择器。
当在内部选择器中使用父选择器时，会将其替换为相应的外部选择器。而不是正常的嵌套行为。
Stack Overflow用户
发布于 2016-05-11 05:25:33
如果你想用scss调用选择器中的另一个类或伪元素，你必须使用&符号。
示例：
<div class="class-1 class-2"></div>萨斯
.class-1 {
&.class-2 {
}
}这将编译以下CSS
.class-1.class-2 {
}要实现您所要求的目标，您需要执行以下操作：
.parent {
&:hover {
.children {
// write the desired CSS
}
}
// for the active class you write
&.is-active {
.children {
// desired CSS
}
}
}在悬停状态下工作fiddle。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37149015
复制相关文章
相似问题
腾讯云开发者
