时间戳

首页 > 解决方案 > 我正在尝试使用 CSS 网格区域制作响应式菜单。有没有一种方法可以让所有其他 div 在悬停时消失，而不仅仅是之后的那些？

html - 我正在尝试使用 CSS 网格区域制作响应式菜单。有没有一种方法可以让所有其他 div 在悬停时消失，而不仅仅是之后的那些？

问题描述

我希望它使网格区域中的所有其他网格淡化为 0.3 不透明度，但只有那些在 html 之后的网格才会在将鼠标悬停在上面时淡化。我想知道是否有人知道如何解决这个问题？

<html>
<head>
    <style>
        .item1 { grid-area: header; }
        .item2 { grid-area: menu; }
        .item3 { grid-area: main; }
        .item4 { grid-area: right; }
        .item5 { grid-area: footer; }

         .grid-container {
             margin-left: 12.5%;
             display: grid;
             width: 75%;
             grid-template-areas:
                 'header header'
                 'menu right'
                 'main footer';
             grid-gap: 60px;
             padding: 10px;
         }
         .grid-container > div {
             background-color: rgba(255, 255, 255, 0.5);
             text-align: center;
             padding: 20px 0;
             font-size: 30px;
             border-radius: 25px;
             background: #ffffff;
             transition: 2s;
         }
         .grid-container > div:hover {
             opacity: 1;
             padding: 50px;
         }
         .grid-container > div:hover ~ [class^="item"] {
             opacity: 0.3;
         }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item1">Header</div>
        <div class="item2" id="item2">menu</div>
        <div class="item3" id="item3">main</div>  
        <div class="item4" id="item4">right</div>
        <div class="item5" id="item5">Footer</div>
      </div>
</body>

标签： htmlcss

解决方案

如果我正确理解了这个问题，这应该对你有用：

.grid-container:hover > div {
    opacity: 0.3;
}

.grid-container > div:hover {
    opacity: 1;
    padding: 50px;
}

推荐阅读