移出outer，所有div颜色最亮

最新推荐文章于 2022-12-19 18:05:26 发布

pinkowonote

最新推荐文章于 2022-12-19 18:05:26 发布

阅读量159

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/pinkowonote/article/details/107706581

版权

Javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了如何通过CSS实现当移除某个元素（如outer）后，其余div元素的颜色达到最亮效果。探讨了选择器的使用和样式继承在这一过程中的关键作用。

摘要由CSDN通过智能技术生成

<!-- 鼠标放在其中一个div上时，颜色最亮
在outer里，但移出这个div时，和颜色最低
移出outer，所有div颜色最亮
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.12.1.min.js"></script>
    <script>
        $(function () {
            $("#outer").mouseleave(function () {
                $("#outer div").css("opacity", "1");
            });
            $("#outer").mouseenter(function () {
                $(".con").mouseover(function () {
                    $(this).css("opacity", "1").siblings("div").css("opacity", "0.4");
                });
            });
        })
    </script>
    <style>
        html {
            background-color: black;
        }

        #outer {
            display: inline-block;
            margin: auto;
            justify-content: center;
            width: 900px;
            height: 600px;
            display: grid;
            grid-template-columns: repeat(3, 300px);
            grid-template-rows: repeat(2, 300px);
            border: 1px solid black;
        }

        .con {
            border: 1px solid black;
            background-color: rgb(251, 2, 2);
            margin: 5px;
            cursor: pointer;
            opacity: 0.4;
        }
    </style>
</head>

<body>
    <div id="outer">
        <div class="con"></div>
        <div class="con"></div>
        <div class="con"></div>
        <div class="con"></div>
        <div class="con"></div>
        <div class="con"></div>
    </div>
</body>

</html>