Question

我正在尝试制作CSS菜单popout

我遇到的问题是，当我隐藏扩展div溢出时，由于translate属性，它将无法正常工作。但是当溢出可见时，可以在下载按钮下方访问菜单，因为扩展的div中有很多div溢出。

.cube {
    z-index:102;
    position:relative;
    width:80px;
    height:40px;
    background-color:red;
    float:left;
    margin:10px;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    overflow:hidden;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 3.5+ */
    -webkit-filter: grayscale(1);
    filter: gray;
}
.cube:hover {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    filter: none;
    -webkit-filter: grayscale(0);
}
#buttonExpand {
    width: 27px;
    height: 25px;
    background: #FAFAFA;
    position: relative;
    -moz-border-radius: 20px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity:0;
    width:27px;
    height:25px;
    margin:0px;
    z-index:101;
}
#buttonExpand:before {
    content:"";
    position: absolute;
    bottom: 100%;
    left: 122px;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-top: 20px solid transparent;
    border-bottom: 20px solid #FAFAFA;
    border-left: 10px solid transparent;
}
#buttonExpand:hover {
    -webkit-transition-property: opacity, margin-top;
    -moz-transition-property: opacity, margin-top;
    -o-transition-property: opacity, margin-top;
    transition-property: opacity, margin-top;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
    -webkit-transform: translate(-120px, 20px);
    -moz-transform: translate(-120px, 20px);
    -o-transform: translate(-120px, 20px);
    transform: translate(-120px, 20px);
    margin-top:15px;
    height:500px;
    width:400px;
    opacity:0.9;
    border-radius:5px;
    box-shadow: 2px 2px 6px #888888;
    cursor:pointer;
}
#buttonDownload {
    z-index:100;
    position:absolute;
    margin-top:10px;
    margin-left:300px;
    height:25px;
    width:27px;
    background-image:url(http://www.mitchmiles262.com/wp-content/uploads/2012/07/Download-Button-Green.gif);
    background-size:cover;
    background-repeat:no-repeat;
    background-color:#666;
    overflow:visible;
}

我还是个菜鸟，怜悯我。：）

继承人jsfiddle，这样你就能更好地理解它。

Answer 1

将display: none;添加到.cube，然后添加以下css：

#buttonExpand:hover .cube{
    display: block;
}

希望它有所帮助，here's the fiddle。

CSS3弹出框，菜单没有隐藏div

1 个答案: