鼠标经过显示边框

最新推荐文章于 2022-11-16 11:35:27 发布

吃饭了吗

最新推荐文章于 2022-11-16 11:35:27 发布

阅读量591

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/weixin_41824429/article/details/106462663

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

鼠标经过显示边框（伪元素方法）

原本图片
在这里插入图片描述
鼠标经过后的图片

    <style>
        .photo{
            width: 400px;
            margin: 200px auto;
            position: relative; /*给父元素设置定位，防止边框乱跑*/
            
        }
        .photo img{
            width: 100%;
        }

        div:hover::before{
            content: "";
            width: 100%;
            height: 100%;
            border: 10px solid rgb(0, 253, 219);
            display: block;   /*伪元素属于行内元素，要转换为块元素*/
            position: absolute;
            top:0;
            left: 0;
            box-sizing: border-box;
        }

    </style>
    
    <div class="photo">
        <img src="img/icon01.png" alt="">
    </div>