空 css-grid 单元格下的元素不响应鼠标事件答案

【问题标题】：Element under empty css-grid cell doesn't respond to mouse events空 css-grid 单元格下的元素不响应鼠标事件
【发布时间】：2019-05-01 14:44:09
【问题描述】：

我有一个基于网格的控制面板，它获取整个屏幕的宽度和高度。网格区域是 2/2，左上角的网格单元没有元素占据其区域。在网格（也有屏幕尺寸）下，我有另一个元素。我希望网格下方的区域能够响应空网格单元格中的鼠标事件。

【问题讨论】：

不看代码就做不了什么.....
向我们展示 CODEEE JERRY

标签： javascript css mouseevent css-grid event-bubbling

【解决方案1】：

我正在寻找这个主题。我有同样的问题。我包含了一个 sn-p，它说明锚在空单元格下时没有响应。

有没有办法在网格设置覆盖链接时使链接响应？

<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>

【讨论】：

通常最好为希望使用您的代码的其他人添加一些解释代码的作用。
@Mahan_F 我确实在我的反应中做了描述。我怎样才能做得更好？