html - CSS3 菜单展开，悬停时消失

Question

我在 CSS3 中制作了一个带有过渡效果的菜单，但问题是当我尝试将鼠标悬停在按钮上方时，展开的按钮消失了，因为刚刚在 Mainmenu DIV 上设置了过渡效果。

我需要一些帮助!

这是我的 jsfiddle: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);
}

Demo here