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

2024-01-08 20:00:03

在这里插入图片描述

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

文章来源:https://blog.csdn.net/sinat_41838682/article/details/135458133
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。