通过scss使用鼠标悬停来点亮单个背景色-如何?
我有一些具有不同背景颜色的块(在变量中设置),如果用户悬停其中一个,颜色将变亮/褪色一点 所以我用这个:通过scss使用鼠标悬停来点亮单个背景色-如何?,css,sass,Css,Sass,我有一些具有不同背景颜色的块(在变量中设置),如果用户悬停其中一个,颜色将变亮/褪色一点 所以我用这个: .block1:hover,.block2:hover{ background-color:lighten($color1,40%); } 但这只会使一种静态颜色($color1)褪色到40%。如果.block1设置了$color1,.block2设置了$color2作为背景色,我该怎么做?所以结果应该是 .block1:hover{ background-col
.block1:hover,.block2:hover{
background-color:lighten($color1,40%);
}
但这只会使一种静态颜色($color1)褪色到40%。如果.block1设置了$color1,.block2设置了$color2作为背景色,我该怎么做?所以结果应该是
.block1:hover{
background-color:lighten($color1,40%);
}
.block2:hover{
background-color:lighten($color2,40%);
}
因此,我需要使用什么?使用mixin,如下所示:
.block1 {
.backgroundsetup($color1);
}
.block2 {
.backgroundsetup($color2);
}
.backgroundsetup($color, $amt: 40%) {
background-color: $color;
&:hover {
background-color: lighten($color, $amt);
}
}
在SCSS中没有特殊的方式来编写示例中的CSS,这就是您的方式。但是如果您想优化并编写更少的代码,那么您可以利用SASS的hashmaps和foreach循环来完成这项工作 SASS
$color1: #4e9bac;
$color2: #248cff;
$color3: #3b5998;
$blocks: (
block1: $color1,
block2: $color2,
block3: $color3,
);
@each $block, $color in $blocks {
.#{$block} {
background-color: $color;
&:hover {
background-color: lighten($color, 40%);
}
}
}
CSS输出
.block1 {
background-color: #4e9bac;
}
.block1:hover {
background-color: #d8eaee;
}
.block2 {
background-color: #248cff;
}
.block2:hover {
background-color: #f0f7ff;
}
.block3 {
background-color: #3b5998;
}
.block3:hover {
background-color: #bbc8e4;
}
我不明白。看起来第二段CSS回答了您的问题?可能想在这里使用mixin。@Vurt:不,它没有。它只显示SCS应执行的操作之后的结果。但是我问了去那里的路,乔希的答案完全解决了。这不是有效的说笑