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

标签 wordpress css wordpress-theming

我有一个关于自定义 wordpress 主题中的某些子环菜单的问题，当鼠标悬停时无法点击，如下面的屏幕截图: sub-ring menus

样式.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.

那我该如何解决呢？

先谢谢

最佳答案

你可以在所有的 anchor 标签中给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;
}

关于wordpress - 在 wordpress 中悬停时子环菜单无法点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36913193/

上一篇：html - 仅导航栏事件类文本的边框

下一篇：css - 如何在 asp.net mvc 5 中动态填充 css 文件

相关文章：

php - 如何在产品循环中向 WooCommerce 产品添加类

php - Wordpress:在 TinyMCE iframe 中添加事件

html - 自定义字体渲染问题

javascript - 点击时的 jQuery 动画做一些不同于第一次的事情

css - 我怎样才能让我的 css overflow hidden 而破坏它？

php - WordPress 中的多词搜索不显示搜索结果

css - 从复制器数据库备份恢复 wordpress 主题自定义 css

javascript - 在 WordPress 页面中嵌入 Tradingview 小部件

wordpress - 更改WordPress的登录标签， "Username"

jquery - 词缀不是函数

©2024 IT工具网  联系我们