CSS3菜单展开，悬停时消失

Question

我在CSS3中制作了一个带有转换的菜单，但问题是，当我试图将鼠标悬停在它们上面时，展开的按钮会消失，因为转换只是在主菜单div.上设置的

我需要一些帮助！

这是我的小提琴：http://jsfiddle.net/7zn2D/

这是我的代码：

<div id="mainmenu">
    <div id="menu"><a href="#">MENU</a></div>
    <div id="home"><a href="#">HOME</a></div>
    <div id="video"><a href="#">VIDEO</a></div>
    <div id="photos"><a href="#">>PHOTO'S</a></div>
    <div id="calendar"><a href="#">CALENDAR</a></div>
</div>
#mainmenu {
position: fixed;
width: 100px;
height: 100px;
top: 400px;
right: -50px;
heigth: auto;
width: auto;
}
#mainmenu div {
color: #333333;
text-decoration: none;
font-size: 22px;
font-weight: 500;
position: fixed;
width: 100px;
height: 100px;
top: 400px;
right: -50px;
background: #333333;
text-align: center;
line-height: 100px;
transition: all 1s ease;
transform: rotate(45deg);
}
a {
  display: block;
  text-decoration: none;
}
#main_nav { list-style: none; margin: 0; padding: 0; }

#main_nav li a { /*text-indent: -999999px;*/ overflow: hidden; display: block; float: right;} 

#menu {
z-index: 5;
}
#home {
z-index: 4;
}
#video {
z-index: 3;
}
#photos {
z-index: 2;
}
#calendar {
z-index: 2;
}
#menu:hover {
background: #FFFFFF;
}
#menu:hover ~ #home {
transition: all 0.3s ease;
transform: rotate(45deg) translate(0px,105px) perspective(350px);
}
#menu:hover ~ #photos {
transition: all 0.3s ease;
transition-delay: 0.3s;
transform: rotate(45deg) translate(0px,210px) perspective(350px);
}
#menu:hover ~ #video {
transition: all 0.3s ease;
transform: rotate(45deg) translate(-105px,0px) perspective(350px);
}
#menu:hover ~ #calendar {
transition: all 0.3s ease;
transition-delay: 0.3s;
transform: rotate(45deg) translate(-210px,0px) perspective(350px);
 }

Answer 1

您需要将:hover事件应用于父级#mainmenu。为了做到这一点，我让#mainmenu有position:fixed，并绝对定位了儿童

#mainmenu {
    position:fixed;
    top: 300px;
    right: -50px;
    height:1px; width:1px;
}
#mainmenu div {
    position:absolute;
    right:0;
    color: #333333;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;    
    width: 100px;
    height: 100px;    
    background: #333333;
    text-align: center;
    line-height: 100px;
    transition: all 1s ease;
    -webkit-transform: rotate(45deg);
}
a {
    display: block;
    color:white;
    text-decoration: none;
    transition: all 0.7s ease;
}
#menu:hover {
    background: #FFFFFF;
}
#menu:hover a {
    color:black;
}
#mainmenu:hover #menu ~ #home {
    transition: all 0.3s ease;
    -webkit-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
}
#mainmenu:hover #menu ~ #photos {
    transition: all 0.3s ease;
    transition-delay: 0.3s;
    -webkit-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
}
#mainmenu:hover #menu ~ #video {
    transition: all 0.3s ease;
    -webkit-transform: rotate(45deg) translate(-105px, 0px) perspective(350px);
}
#mainmenu:hover #menu ~ #calendar {
    transition: all 0.3s ease;
    transition-delay: 0.3s;
    -webkit-transform: rotate(45deg) translate(-210px, 0px) perspective(350px);
}

此处演示