鼠标移入高亮边框效果

效果展示

鼠标移入边框效果

一、布局

// 布局
<template>
    <div class="container">
        <div class="card">
            <div class="inner">君不见，黄河之水天上来，奔流到海不复回。</div>
        </div>
        <div class="card">
            <div class="inner">君不见，高堂明镜悲白发，朝如青丝暮成雪。</div>
        </div>
        <div class="card">
            <div class="inner">人生得意须尽欢，莫使金樽空对月。</div>
        </div>
        <div class="card">
            <div class="inner">天生我材必有用，千金散尽还复来。</div>
        </div>
        <div class="card">
            <div class="inner">烹羊宰牛且为乐，会须一饮三百杯。</div>
        </div>
        <div class="card">
            <div class="inner">岑夫子，丹丘生，将进酒，杯莫停。</div>
        </div>
    </div>
</template>

二、样式

// 样式

<style scoped>
/* 网格布局 */
.container {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    justify-content: center;
}
/* 每个card卡片相对定位 */
.card {
    aspect-ratio: 4/3;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* 里面的文字绝对定位 */
.inner {
    position: absolute;
    inset: 2px;
    background: #222;
    border-radius: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
/* 这个是card的边框 */
.card::before {
    content: '';
    position: absolute;
    top: var(--y, -1000px);
    left: var(--x, -1000px);
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(
        closest-side circle,
        rgba(255, 255, 255, 0.6) 0%,
        transparent
    );
    transform: translate(-50%, -50%);
}
</style>

三、交互

// 交互
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
    const container = document.querySelector('.container')
    const cards = document.querySelectorAll('.card')
    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`)
        }
    }
})
</script>