ハンバーガーメニューの3本線だけにクリック範囲を指定したい

Question

ハンバーガーメニューを作っています。

ハンバーガーメニューで囲った　class でなく
3本線の部分だけマウスオーバーしたらクリック出来るようにしたいのですが、
どのように書いたら良いでしょうか？

クリック範囲を広げるには
display:block;
で広げるのはわかるのですが、　指定した3本線だけにする方法は調べても分かりませんでした。

<div class="hamburger js-hamburger">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <!-- /.hamburger -->

/*
ハンバーガ―メニュー
*/
  .hamburger {
    background-color:black;
    display: block;
    width: 85px;
    height: 85px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 30;
    cursor: pointer;
    transition: 0.3s;
  }

  .hamburger:hover {
    opacity: 0.7;
  }

  /* ハンバーガーメニューの線の設定（メニューが閉じている時） */
  .hamburger span {
    width: 50%;
    height: 2px;
    background: #fff;
    color:black;
    position: absolute;
    left: 25px;
    transition: 0.3s ease-in-out;
  }

  /* 1本目の線の位置を設定 */
  .hamburger span:nth-child(1) {
    top: 36%;
  }

  /* 2本目の線の位置を設定 */
  .hamburger span:nth-child(2) {
    top: 50%;
  }

  /* 3本目の線の位置を設定 */
  .hamburger span:nth-child(3) {
    top: 64%;
  }

  /*
ハンバーガーメニューの線の設定（メニューが開いている時）
1本目の線を-45度回転
*/
  .hamburger.open span:nth-child(1) {
    top: 47px;
    left: 25px;
    background: #fff;
    transform: rotate(-45deg);
  }

  /* 2本目と3本目は重ねて45度回転 */
  .hamburger.open span:nth-child(2),
  .hamburger.open span:nth-child(3) {
    top: 47px;
    background: #fff;
    transform: rotate(45deg);
  }

  /*マスク*/
  #burger-musk {
    display: none;
    transition: 0.5s;
  }

  #burger-musk.open {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, .8);
    cursor: pointer;
    display: block;
    opacity: 0.8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  }

コードペンURL

Answer 1

流石に本当に線のみクリックできる状態だとUI的に良くないと思いますが、こんな感じで中にもう一つdivを作って線のみ囲めばいいんじゃないでしょうか？

<div class="hamburger js-hamburger">
  <div class="hamburger-inner">
    <span></span>
    <span></span>
    <span></span>
  </div>
 </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

/*
ハンバーガ―メニュー
*/
.hamburger {
  background-color:black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 85px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  transition: 0.3s;
}

.hamburger:hover {
  opacity: 0.7;
}

/*追加*/
.hamburger-inner{
  width: 42.5px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.hamburger span {
  width: 100%;
  height: 2px;
  background: #fff;
  color:black;
  position: absolute;
  left: 0;
  transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 50%;
}

.hamburger span:nth-child(3) {
  bottom: 0;
}

.hamburger-inner.open span:nth-child(1) {
  top: 50%;
  left: 0;
  background: #fff;
  transform: rotate(-45deg);
}

.hamburger-inner.open span:nth-child(2),
.hamburger-inner.open span:nth-child(3) {
  top: 50%;
  background: #fff;
  transform: rotate(45deg);
}

$(function(){

  /*=================================================
      ハンバーガ―メニュー
      ===================================================*/
      $('.hamburger-inner').on('click', function() {
        $(this).toggleClass('open');
        $('#navi').toggleClass('open');
        $('body').toggleClass('noscroll');
  
        if ($('.hamburger-inner').hasClass('open')) {
                 $('#burger-musk').fadeToggle(300).addClass('open');
  
        } else {
  
          $('#burger-musk').fadeToggle(300).removeClass('open');
  
        }
      });
  
      // #maskのエリアをクリックした時にメニューを閉じる
      $('#burger-musk').on('click', function() {
        $('.hamburger-inner').removeClass('open');
        $('#navi').removeClass('open');
        $('body').removeClass('noscroll');
        $('#burger-musk').fadeToggle(300).addClass('open');
  
  
      });
  
      // リンクをクリックした時にメニューを閉じる
      $('#navi a').on('click', function() {
        $('.hamburger-inner').removeClass('open');
        $('#navi').removeClass('open');
        $('body').removeClass('noscroll');
      });
    })

https://codepen.io/fushimi/pen/gOoVjjb
アニメーションなどは適宜調整してください。