首页 前端知识 【css】快速实现鼠标悬浮变色效果

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

2024-08-22 23:08:03 前端知识 前端哥 531 339 我要收藏

在这里插入图片描述

<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://www.qianduange.cn//article/16591.html
标签
评论
发布的文章

【Jquery】jquery的简单使用

2024-09-01 00:09:11

NodeJs使用jQuery中$Ajax

2024-09-01 00:09:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!