使用可旋转元素可以点击整个div

Question

我创建了一个汉堡菜单，当点击它时，它会旋转两个孩子，一个被隐藏。汉堡包有30px宽度和13px高度。问题是：当两个孩子旋转时，高度增加，但只有中心区域（可点击30px / 13px）。

如何使整个“X”可点击？

var hamburger = document.getElementById("menu-icon-css");
var menuMobile = document.getElementById("menu-links");

hamburger.addEventListener("click", function open() {
  hamburger.classList.toggle("rotate");
})

#menu-icon-css {
  z-index: 50;
  margin-top: 50px;
  width: 30px;
  height: 13px;
  position: relative;
  cursor: pointer;
  display: block;
}
#menu-icon-css span {
  transition: 0.3s all ease-in-out;
  height: 3px;
  background-color: #000;
  position: absolute;
  width: 100%;
}
#menu-icon-css span:nth-child(1) {
  top: 0;
}
#menu-icon-css span:nth-child(2) {
  top: 6px;
  width: 70%;
  right: 0;
}
#menu-icon-css span:nth-child(3) {
  top: 12px;
}
@media screen and (min-width: 920px) {
  #menu-icon-css {
    display: none;
  }
}

#menu-icon-css.rotate span:nth-child(1) {
  transform: rotate(135deg);
  top: 6px;
}
#menu-icon-css.rotate span:nth-child(2) {
  opacity: 0;
  transition: 0.1s all ease-in-out;
}
#menu-icon-css.rotate span:nth-child(3) {
  transform: rotate(-135deg);
  top: 6px;
}

<div id="menu-icon-css">
  <span></span>
  <span></span>
  <span></span>
</div>

我将在Inspect上留下问题的印刷品。

谢谢！

Answer 1

尝试对主要上边距，menu-icon-css div的高度以及子元素的位置进行一些调整，例如以下内容。 （我更改了代码中的行，我注释掉了，并替换为包含我的更改的行。）

#menu-icon-css {
    z-index: 50;
    //margin-top: 50px;
    margin-top: 42px;
    width: 30px;
    //height: 13px;
    height: 30px;
    position: relative;
    cursor: pointer;
    display: block;
}
#menu-icon-css span {
    transition: 0.3s all ease-in-out;
    height: 3px;
    background-color: #000;
    position: absolute;
    width: 100%;
}
#menu-icon-css span:nth-child(1) {
    top: 0;
}
#menu-icon-css span:nth-child(2) {
    top: 6px;
    width: 70%;
    right: 0;
}
#menu-icon-css span:nth-child(3) {
    top: 12px;
}
@media screen and (min-width: 920px) {
    #menu-icon-css {
    display: none;
  }
}

#menu-icon-css.rotate span:nth-child(1) {
    transform: rotate(135deg);
    //top: 6px;
    top: 14px;
}
#menu-icon-css.rotate span:nth-child(2) {
    opacity: 0;
    transition: 0.1s all ease-in-out;
}
#menu-icon-css.rotate span:nth-child(3) {
    transform: rotate(-135deg);
    //top: 6px;
    top: 14px;
}