なぜかアイコンの下の方しかクリックできない

実現したいこと

アイコンの中ならどこでもいいのでクリックしたらちゃんと動作するようにしたい！！

前提

今ハンバーガーメニューの練習サイトを作っているのですが、メニューを閉じるボタンがアイコンのめっちゃ下の方しかクリックできません。
できればコードをコピーしていただいて実際に動作を確認していただきたいです。

試したこと

やり方が間違っているかもですがz-indexで重なり順を変えたり色々ググりましたがなかなか出てきませんでした。


### 該当のソースコード

```HTMl
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Humberger Menu</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body >
      <div id="body">
      <div id="humberger">
        <div id="icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-list " viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" class=""/>
            </svg>
        </div>

        <div id="close">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
              </svg>
            </svg>
        </div>
    </div>
    <div id="menu">
        <a href="">Menu</a>
        <a href="">Menu</a>
        <a href="">Menu</a>
    </div>
    <div>
        <h1>LOGO</h1>
        <p>こんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちは</p>
    </div>

</div>


    <script src="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>

css
1'use strict';
2
3    const humberger = document.getElementById('humberger');
4    const menu = document.getElementById('menu');
5    const body = document.getElementById('body');
6    const icon = document.getElementById('icon');
7    const close = document.getElementById('close');
8    const path = document.getElementById('path');
9
10
11icon.addEventListener('click',() => {
12    menu.classList.toggle('hum');
13    body.classList.toggle('body');
14    icon.classList.toggle('animation');
15    close.classList.toggle('show');
16  
17});
18
19close.addEventListener('click', () => {
20        menu.classList.toggle('hum');
21    body.classList.toggle('body');
22    icon.classList.toggle('animation');
23    close.classList.toggle('show');
24})
25

Javascript
1
2#menu {
3    position: fixed;
4    right: 50%;
5    top: 25%;
6    opacity: 0;
7}
8
9
10#humberger {
11    position: fixed;
12    right: 20px;
13    cursor: pointer;
14}
15
16#close {
17    /* position: fixed;  */
18    margin: 0;
19    opacity: 0;
20    cursor: pointer;
21    top: 0;
22    right: 20px;
23}
24
25#icon {
26    top: 10px;
27    right: 20px;
28    opacity: 1;
29}
30
31
32#icon.animation {
33    opacity: 0;
34    /* transition: opacity .3s; */
35    display: none;
36}
37
38#close.show {
39    opacity: 1;
40    transition: .5s;
41    margin: 0;
42    cursor: pointer;
43    top: 0;
44    right: 20px;
45}
46
47
48
49.body :not(#menu):not(a):not(#humberger):not(div):not(svg):not(path){
50    opacity: .3;
51}
52
53#menu > a {
54    display: block;
55    margin-top: 16px;
56}
57
58#menu.hum {
59    opacity: 1;
60    transition: opacity .3s;
61}

補足情報（FW/ツールのバージョンなど）

まだ初心者ですのでここを〜した方がいいよ！などのアドバイスも頂ければなと思います
バージョンは最新だと思います

sho981

2023/08/15 01:59

わかりました。ありがとうございます！

yambejp

2023/08/15 02:28

例示したソースのキャプションが、cssとjavascripが逆になっていますね

行動規範の内容に同意します

回答1件

ベストアンサー

やりかたはいくつかありそうですが、端的に今回のケースではh1が#closeの上にかぶさってますね
「.body :not(#menu):not(a):not(#humberger):not(div):not(svg):not(path)」で設定したopacityの影響のようです。

対処方法としては

CSS
1.body h1{
2  position:relative;
3  z-index:-1;
4}

とすれば行けると思います
それと普段から「X」にサワれるようになっているのでこれはこうしておいたほうがよいでしょう

CSS
1#close:not(.show) {
2display:none;
3}

投稿2023/08/15 02:15

yambejp

総合スコア117674

sho981

2023/08/17 23:55

コメント遅れてしまってすみません。ありがとうございます！無事に解決できました!!

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

なぜかアイコンの下の方しかクリックできない

実現したいこと

前提

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問