Question

我有一个基于网格的控制面板，该面板占用了整个屏幕的宽度和高度。网格面积为2/2，并且左上角的网格单元不包含任何要占用其面积的元素。在网格下方（还有屏幕尺寸），我还有另一个元素。我希望网格下方的区域能够对空网格单元中的鼠标事件做出响应。

Answer 1

我正在寻找这个话题。我有同样的问题。我包含了一个片段，说明锚点在空单元格下时没有响应。

在网格设置覆盖链接时，是否可以使链接响应？

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            padding: 50px;
        }

        a {
            border: 1px solid red;
        }

        .grid {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.3;
            width: 100%;
            height: 100%;
            display: grid;
            grid-column-gap: 8px;
            grid-row-gap: 8px;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-template-areas:
            ". widget2"
            "widget3 widget4"; 
        }
        
        .grid-item {
            position: relative;
            background-color: silver;
        }
        
        .grid > div:nth-child(1) {
            grid-area: widget1;
        }
        
        .grid > div:nth-child(2) {
            grid-area: widget2;
        }
        
        .grid > div:nth-child(3) {
            grid-area: widget3;
        }
        
        .grid > div:nth-child(4) {
            grid-area: widget4;
        }
    </style>
</head>
<body>
    <a href="www.google.com">Click me if you dare</a>
    <div class="grid">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
    </div>
</body>
</html>

空的CSS网格单元格下的元素不响应鼠标事件

1 个答案: