我正在使用 scss 并试图隐藏一个图标,当我将鼠标悬停在按钮上时,我希望显示该图标。我也想为它制作动画,所以我不能使用 display:none 因为我相信你不能为它制作动画。所以我尝试使用不透明度和可见性。
我有两个问题。首先,按钮中的文本没有居中,因为图标处于不可见状态,但是当您转到开发工具时,您仍然可以在那里看到它。其次,图标不会出现在悬停时。
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba($color-black, .2);
&--primary {
background-color: $color-primary;
color: $color-white;
transition: all .2s;
&__icon {
visibility: hidden;
opacity: 0;
}
&:hover {
transform: translateY(-2px);
&__icon {
visibility: visible;
opacity: 1;
}
}
}
}
<a href="#" class="btn btn--primary">Discover More <i class="btn--primary__icon icon-basic-clockwise"></i></a>
最佳答案
我认为问题在于您的图标显示为零内容。我认为您可能需要将图标更改为 display: inline-block;
并为其指定一些尺寸。当图标不可见时,您需要将尺寸设置为 0px
。
我将您的代码从 SCSS 转换为 CSS,并将 $variables 替换为实际的 CSS 颜色以制作一个有效的代码段...
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba(0,0,0, .2);
width: 240px;
}
.btn--primary {
background-color: red;
color: white;
transition: all .2s;
}
.btn--primary__icon {
display: inline-block;
width: 0px;
height: 0px;
visibility: hidden;
opacity: 0;
}
.btn--primary:hover {
transform: translateY(-2px);
}
.btn--primary:hover .btn--primary__icon {
width: 20px;
height: 20px;
background-color: blue;
visibility: visible;
opacity: 1;
}
<a href="#" class="btn btn--primary">
Discover More
<i class="btn--primary__icon icon-basic-clockwise"></i>
</a>
关于css - 使用 sass 悬停时不显示图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55017817/