【css】快速实现鼠标悬浮变色效果

<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时动态切换的效果；