Question

我在这里创建了一个弹出式菜单：https://jsfiddle.net/qpbmyhor/

现在我希望弹出菜单链接可以点击。现在，当你将鼠标悬停在它上面时，它只会消失并且无法点击。如何才能使整个画布/菜单有效？

这是我的CSS：

ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}

.icon-box a {display: block;}



/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.home h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #E74C3C; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
        border-left: 3px solid #a7382d;

}

.icon-box.home a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}

.icon-box.aboutme h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #1dd0ad; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #0d866e;
}

.icon-box.aboutme a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}


.icon-box.portfolio h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #3498db; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #2177b1;
}

.icon-box.portfolio a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}


.icon-box.blog h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #f1c40f; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #b8960e;
}

.icon-box.blog a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}

.icon-box.contact h2 { 
     z-index: -999;
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     background: #f39c12; 
     line-height: 120px; 
     width: 120px; 
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #bc780d;
}

.icon-box.contact a:hover h2 { 
    opacity: 1; left: 120px; margin: 0;
    text-align: center;

}



/*= MENU ICONS
--------------------------------------------------------*/


span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}

有什么想法吗？如果你能告诉我JSFIDDLE SOLUTIONS呢！

注意它必须弹出图标框的底部。

Answer 1

您需要将z-index更改为0类icon-box以实现您的目标。

例如，

.icon-box.aboutme h2, .icon-box.home h2, .icon-box.portfolio h2, .icon-box.blog h2, .icon-box.contact h2{
        z-index:0;
    }

<强> Live demo

如果你想实现这个目标，保持对象在顶部，解决方案如下。

<强>代码：

.icon-box a {
    padding: 120px;
}

<强> Live demo - 2

希望这有帮助。

Answer 2

像这样使用，你不需要为每个菜单编写css。

＆＃13;

parse

＆＃13;

Answer 3

Please have a look on the link. 
I just noticed that you are controlling the popover element with every li  a:hover and you should avoid it.
I tried to optimize your code and I think it's better to control hover on li element instead of a tag. (It might be possible that you have some different requirement that's why you are controlling it on a:hover)

https://jsfiddle.net/ashubuddy/qpbmyhor/4/

CSS：如何使弹出菜单可点击？

3 个答案: