css实现hover时出现半透明边框

最新推荐文章于 2023-04-15 10:58:28 发布

Yunmay

最新推荐文章于 2023-04-15 10:58:28 发布

阅读量274

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_73814236/article/details/129129396

版权

需求：

当鼠标hover时，图片的内边缘出现半透明边框
在这里插入图片描述

思路分析

由于半透明边框需要出现在图片内部，所以不能直接给这个图片加边框，可在图片上再加一个图层，给其设置边框后借助容纳块的计算公式让其宽高自动计算。

解决方案：

    <style>
        body {
            background-color: #333333;
        }

        ul {
            margin: 100px auto;
            padding: 0;
            width: 1010px;
            text-align: center;
            list-style-type: none;
        }

        ul::after {
            content: '';
            display: block;
            clear: both;
        }

        li {
            position: relative;
            float: left;
            margin: 0 10px;
        }

        li a {
            display: block;
            height: 170px;
        }
            /* 容纳块的内容区宽度+padding=left+right + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right */
            /* 316px = 0+0+0+10+0+auto+0+10+0
            auto = 316 - 20 */
        li a:before {
            display: none;
            position: absolute;
            content: '';
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            border: 10px solid rgba(255, 255, 255, .5);
        }

        li a:hover::before {
            display: block;
        }
    </style>

    <ul>
        <li>
            <a href="#"><img src="./x1.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="./x2.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="./x3.jpg" alt=""></a>
        </li>
    </ul>