[css]親要素に邪魔されず下のレイヤーをクリックできるようにする方法

フロートさせた要素の隙間の処理とかに。

どういうことか
cssで対策できる
1. 注意

どういうことか

こういうのがあったとする。

<div class="parent">
    <div class="child"><a href="">...</a></div>
    <div class="child"><a href="">...</a></div>
    <div class="child"><a href="">...</a></div>
</div>

.parent{
    padding: 40px;
    position: fixed;
    left: 0;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    .child{
        a{
            width: 200px;
            height: 60px;
            background: #ddd;
        }
    }
}

子要素（.child）をクリックさせたいわけである。
子要素だけクリックできたらそれでいい。

だけど親要素（.parent）のpaddingとかgapとかの部分は親要素の当たり判定があるので、見た目隙間になっていても下のレイヤーがクリックできない。

嫌だよね。

cssで対策できる

こう。

.parent{
    pointer-events: none;
    .child{
        a{
            pointer-events: auto;
        }
    }
}

まず全体をpointer-events: none;でクリック対象から除外する。

クリックさせたい部分だけpointer-events: auto;を付与して、クリック対象とする。

注意

pointer-events: none;の対象はクリックできないので、だからjsでセレクタにしてクリックとかホバーで発火させることはできない。

そんな感じ。