鼠标滑过元素边框高亮

最新推荐文章于 2024-07-11 17:28:05 发布

山沟沟里的娃

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量131

点赞数 3

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_34856863/article/details/137683519

版权

html结构

<div class="cardBox">
        <div class="gtextBox">
            <div class="inner">
                我是内容 
            </div>
        </div>
        <div class="gtextBox">
            <div class="inner">
                我是内容 
            </div>
        </div>
        <div class="gtextBox">
            <div class="inner">
                我是内容 
            </div>
        </div>
        <div class="gtextBox">
            <div class="inner">
                我是内容 
            </div>
        </div>
        <div class="gtextBox">
            <div class="inner">
                我是内容 
            </div>
        </div>
        <div class="gtextBox">
            <div class="inner">
                我是内容 
            </div>
        </div>

    </div>

css样式

.cardBox{
            display: flex;
            flex-wrap: wrap;
            width: 660px;
        }
        .gtextBox{
            width: 200px;
            height: 200px;
            background: #000;
            position: relative;
            border-radius: 5px;
            margin: 0 20px 20px 0;
            overflow: hidden;
        }
        .gtextBox::after{
            content: '';
            position: absolute;
            z-index: 2;
            inset: 0;
            left: 0;
            top: 0;
            border-radius: inherit;
            /* background: radial-gradient(closest-side circle, 
                rgba(255,255,255,.6) 0%,
                transparent
            ); */
            background: red;
            transform: translate(var(--x, -1000px), var(--y, 1000px));
        }
        .gtextBox .inner{
            inset: 2px;
            position: absolute;
            background: pink;
            z-index: 3;
            border-radius: inherit;
        }

js代码

const container = document.querySelector('.cardBox');
        const cards = document.querySelectorAll('.gtextBox');
        container.onmousemove = function(e) {
            for(const card of cards){
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                card.style.setProperty('--x',`${x}px`)
                card.style.setProperty('--y',`${y}px`)
            }
        }