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

最新推荐文章于 2025-05-04 14:27:33 发布

Lana学习中

最新推荐文章于 2025-05-04 14:27:33 发布

阅读量1.3k

点赞数 8

分类专栏： VUE 文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/sinat_41838682/article/details/135458133

版权

VUE 专栏收录该内容

16 篇文章

订阅专栏

在这里插入图片描述

<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');
            }
        }
    }