css菜单栏流动底色

最新推荐文章于 2023-12-03 17:16:56 发布

小趴菜~~~

最新推荐文章于 2023-12-03 17:16:56 发布

阅读量128

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_43164363/article/details/128474110

版权

QQ录屏20221228210028

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #ass {
                display: grid;
                background-color: aquamarine;
                grid-template-columns: repeat(auto-fill, 1fr);
                height: auto;
                grid-auto-flow: column;
                gap: 40px;
                width: 100%;
                position: relative;
            }
            div {
                border: 1px red solid;
                height: 200px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: all 0.3s ease-out 0s;
                text-transform: uppercase;
                z-index: 1;
            }
            div:last-child {
                position: absolute;
                background-color: yellow;
                height: 100%;
                border-radius: 0.5em;
                z-index: 0;
                transform: scaleX(1.2);
            }
            /* div:lang(rf){
                color: red;
            } */
        </style>
    </head>
    <body>
        <main id="ass">
            <div>Houdunren</div>
            <div>Javascript</div>
            <div>HTML</div>
            <div lang="rf">Share</div>
            <div>Xiangjiu</div>
            <div>React</div>
            <div>Nest.js</div>
        </main>
        <script>
            const app = document.querySelector('#ass');
            app.insertAdjacentHTML('beforeend', '<div></div>');
            const mask = app.querySelector('div:last-child');

            app.querySelectorAll('div').forEach(div => {
                div.addEventListener('mouseenter', e => {
                    const el = e.target;
                    mask.style.setProperty('left', el.offsetLeft + 'px');
                    mask.style.setProperty('width', el.offsetWidth + 'px');
                });
            });
        </script>
    </body>
</html>