实现代码:
html代码:
<img class="default-img" [src]="assetsBaseUrl + 'supplier.svg'" alt="">
<img class="hover-img" [src]="assetsBaseUrl + 'supplier-hover.svg'" alt="">
css代码:
.content {
.hover-img {
display: none;
}
&:hover {
.default-img{
display: none;
}
.hover-img {
display: block;
}
}
.hover-image
是默认不显示的,当鼠标悬停在.image-container
上时,.default-image
会被隐藏,.hover-image
会显示出来。