在 wordpress 中悬停时无法单击子环菜单

Question

我有一个问题，自定义 wordpress 主题中的某些子环菜单在鼠标悬停时无法点击，如下图所示：

style.css

.menu-item,
.menu-open-button {
   border-radius: 100%;
   width: 100px;
   height: 100px;
   margin-left: -40px;
   margin-top: 60px;
   position: absolute;
   color: #FFFFFF;
   text-align: center;
   line-height: 80px;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform ease-out 200ms;
   transition: -webkit-transform ease-out 200ms;
   transition: transform ease-out 200ms;
   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;

}

.menu-open {
   display: none;
}

.lines {

}

.line-1 {
   -webkit-transform: translate3d(0, -8px, 0);
   transform: translate3d(0, -8px, 0);
}

.line-2 {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.line-3 {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {

}

.menu-open:checked + .menu-open-button .line-2 {

}

.menu-open:checked + .menu-open-button .line-3 {

}

.menu {
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   box-sizing: border-box;
   font-size: 26px;
   background-image: url('img/logo.png');
   background-repeat: no-repeat;
   background-size:20% 90%;
   background-position: top center;
   background-attachment: scroll;
}

.menu-item:hover {
   color: transparent;
}

.menu-item:nth-child(3) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(4) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(5) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(6) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(7) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(8) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(9) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-open-button {
   z-index: 1;
   cursor: pointer;
}

.menu-open-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
   transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {

   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
   -webkit-transition-duration: 200ms;
   transition-duration: 200ms;
   -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
   transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
     z-index: -1;
    width: 11%;
    height: 50%;
   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

/*--------------------------------------------------------------
## Yellow
--------------------------------------------------------------*/
.menu-open:checked ~ .menu-item:nth-child(3) {
   transition-duration: 180ms;
   -webkit-transition-duration: 180ms;
   -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
   transform: translate3d(-265.9466px, 114.47586px, 0);
      line-height: 5;
}

/*--------------------------------------------------------------
## Light Blue
--------------------------------------------------------------*/
.menu-open:checked ~ .menu-item:nth-child(4) {
   transition-duration: 280ms;
   -webkit-transition-duration: 280ms;
   -webkit-transform: translate3d(90.9466px, 80.47586px, 0);
   transform: translate3d(186.9466px, 114.47586px, 0);
   line-height: 5;
}

/*--------------------------------------------------------------
## Red
--------------------------------------------------------------*/
.menu-open:checked ~ .menu-item:nth-child(5) {
   transition-duration: 380ms;
   -webkit-transition-duration: 380ms;
   -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
   transform: translate3d(300.9466px, 0.47586px, 0);
   line-height: 5;
}

/*--------------------------------------------------------------
## Purple
--------------------------------------------------------------*/
.menu-open:checked ~ .menu-item:nth-child(6) {
   transition-duration: 480ms;
   -webkit-transition-duration: 480ms;
   -webkit-transform: translate3d(20.08361px, 154.99997px, 0);
   transform: translate3d(45.08361px, 192.62064px, 0);
   line-height: 5;
}

/*--------------------------------------------------------------
## Orange
--------------------------------------------------------------*/
.menu-open:checked ~ .menu-item:nth-child(7) {
   transition-duration: 580ms;
   -webkit-transition-duration: 580ms;
   -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
   transform: translate3d(-120.86291px, 192.62064px, 0);
    line-height: 5;
}

/*--------------------------------------------------------------
## Light Blue
--------------------------------------------------------------*/
.menu-open:checked ~ .menu-item:nth-child(8) {
   transition-duration: 680ms;
   -webkit-transition-duration: 680ms;
   -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
   transform: translate3d(-380.9466px, 0.47586px, 0);
   line-height: 5;
}


.menu-open:checked ~ .menu-item:nth-child(9) {
   transition-duration: 780ms;
   -webkit-transition-duration: 780ms;
   -webkit-transform: translate3d(-0.25084px, -204.9997px, 0);
   transform: translate3d(-0.25084px, -124.9997px, 0);
}

.blue {
   background-color: #efc015;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
   z-index: -1;
}

.blue:hover {
   color: #ccc;
   text-shadow: none;
   text-decoration: none;
}

.green {
   background-color: #32bbd2;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
   z-index: -1;

}

.green:hover {
   color: #ccc;
   text-shadow: none;
   text-decoration: none;
}

.red {
   background-color: #717171;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
   z-index: -1;

}

.red:hover {
   color: #ccc;
   text-shadow: none;
   text-decoration: none;
}

.purple {
   background-color: #755ea7;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
   z-index: -1;
}

.purple:hover {
   color: #CCC;
   text-shadow: none;
   text-decoration: none;


}

.orange {
   background-color: #0d4c28;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
   z-index: -1;
}


.orange:hover {
   color: #ccc;
   text-shadow: none;
   text-decoration: none;
}

.lightblue {
   background-color: #0882c3;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
   z-index: -1;
}

.lightblue:hover {
   color: #ccc;
   text-shadow: none;
   text-decoration: none;
}

.credit {
   margin: 24px 20px 120px 0;
   text-align: right;
   color: #EEEEEE;
}

.credit a {
   padding: 8px 0;
   color: #C49CDE;
   text-decoration: none;
   transition: all 0.3s ease 0s;
}

.credit a:hover {
   text-decoration: underline;
}

更多详情请查看demo website.

那么我该如何解决呢？

感谢之前

Answer 1

您可以在所有锚标记中给出 Z-index:9。

.menu-open:checked ~ .menu-item:nth-child(8) {
  line-height: 5;
  transform: translate3d(-380.947px, 0.47586px, 0px);
  transition-duration: 680ms;
  z-index: 9;
}
.menu-open:checked ~ .menu-item:nth-child(3) {
  line-height: 5;
  transform: translate3d(-265.947px, 114.476px, 0px);
  transition-duration: 180ms;
  z-index: 9;
}
.menu-open:checked ~ .menu-item:nth-child(4) {
  line-height: 5;
  transform: translate3d(186.947px, 114.476px, 0px);
  transition-duration: 280ms;
  z-index: 9;
}
.menu-open:checked ~ .menu-item:nth-child(5) {
  line-height: 5;
  transform: translate3d(300.947px, 0.47586px, 0px);
  transition-duration: 380ms;
  z-index: 9;
}

Answer 2

使用

pointer-events: none;

在您的菜单上。

Answer 3

只需在“.menu”类中添加 Z-index 正数（更高）