我正在尝试使用sass嵌套多个类。我想使用鼠标悬停显示一个按钮。我的scss如下：
.item{
border-bottom: 1px dotted #ccc;
text-indent: 50px;
height: 81%;
padding: 2px;
text-transform: capitalize;
color: green;
.Button{
visibility: hidden;
&:hover{
visibility: visible;
}
}
}
这在CSS中显示为：
.item {
border-bottom: 1px dotted #ccc;
text-indent: 50px;
height: 81%;
padding: 2px;
text-transform: capitalize;
color: green; }
.item .Button {
visibility: hidden; }
.item .Button:hover {
visibility: visible; }
悬停属性在这里不起作用。
由于按钮已经隐藏，因此我将visible属性放在item：hover上。
SCSS的外观：
.item {
border-bottom: 1px dotted #ccc;
text-indent: 50px;
height: 81%;
padding: 2px;
text-transform: capitalize;
color: green;
.Button {
visibility: hidden;
}
&:hover .Button {
visibility: visible;
}
}
.item {
border-bottom: 1px dotted #ccc;
text-indent: 50px;
height: 81%;
padding: 2px;
text-transform: capitalize;
color: green;
}
.item .Button {
visibility: hidden;
}
.item:hover .Button {
visibility: visible;
}<div class="item">
Hover Item Class
<button class="Button">button shows</button>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句