<div class="nav-item">
<div class="ic-img"></div>
<div>切换</div>
</div>
.nav-item {
width: 100rem;
height: 45rem;
line-height: 45rem;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
.ic-img {
width: 20px;
height: 20px;
margin-right: 5px;
background-size: 100% 100%;
background-image: url('@/assets/ic.png');
}
&:hover {
color: #1be7e0;
.ic-img {
background-image: url('@/assets/ic-actived.png');
}
}
}
关键点:把图片作为背景设置,以此实现Hover时动态切换的效果;