web前端JQuery当鼠标浏览到对应的地方盒子颜色相对改变

小冷4332

已于 2023-12-29 20:41:28 修改

阅读量583

点赞数 9

分类专栏：网页开发html/css/JQuery 文章标签：前端

于 2023-12-25 01:50:07 首次发布

山山4332

本文链接：https://blog.csdn.net/qq_64064356/article/details/135189955

版权

网页开发html/css/JQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

浏览器运行效果：

盒子案例视频

JQuery下载：

http://链接：https://pan.baidu.com/s/1_-gBgHl3MrK-JtWg3444Cw?pwd=4332 提取码：4332

运行代码展示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子案例</title>
    <style type="text/css">
        * {
            margin: 0 auto;
            padding: 0;
        }

        .clear {
            clear: both;
        }

        a {
            padding: 0 73px;
            text-decoration: none;
            color: #000;
            background-color: #CCC;
            font-size: 26px;
        }

        #nav {
            position: relative;
        }

        li {
            float: left;
            width: 198px;
            border: 1px solid #333;
            text-align: center;
            list-style-type: none;
        }

        .box {
            border: 1px solid #333;
            width: 800px;
            height: 380x;
            margin: 0 auto;
            margin-top: 50px;
            text-align: center;
        }

        .one {
            position: absolute;
            left: 0;
            top: 2em;
            width: 800px;
            height: 360px;
        }

        #red {
            background-color: red;
            display: none;
        }

        #blue {
            background-color: blue;
            display: none;
        }

        #green {
            background-color: green;
            display: none;
        }

        #orange {
            background-color: orange;
            display: none;
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#nav').find('a').mouseover(function () {
                var ys = $(this).attr('yanse');
                $('#nav a').css({ 'background': '#CCC' });
                $(this).css({ 'background': ys });
                $('#nav .one').css({ 'display': 'none' });
                $(this).next().css({ 'display': 'block' });
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <ul id="nav">
            <li>
                <a id="btn-red" href="#" yanse="red">红色</a>
                <div class="one" id="red">红色模块区域1</div>
            </li>
            <li>
                <a id="btn-blue" href="#" yanse="blue">蓝色</a>
                <div class="one" id="blue">蓝色模块区域2</div>
            </li>
            <li>
                <a id="btn-green" href="#" yanse="green">绿色</a>
                <div class="one" id="green">绿色模块区域3</div>
            </li>
            <li>
                <a id="btn-orange" href="#" yanse="orange">橙色</a>
                <div class="one" id="orange">橙色模块区域4</div>
            </li>
        </ul>
    </div>
</body>
</html>