CSS3菜單展開，懸停

自敗我已經做了菜單與CSS3過渡，但問題是，當我嘗試將鼠標懸停在他們展開dissapear的按鈕，因爲那正好被設置在MAINMENU DIV過渡。CSS3菜單展開，懸停

我可以利用一些幫助！

這裏是我的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); 
}

來源

2013-12-12 user3095615

哎喲'TEXT-INDENT：-999999px'，使用-9999px是夠糟糕的了，但999999？ [閱讀]（http://stackoverflow.com/questions/8971152/is-text-indent-9999px-a-bad-technique-for-replacing-text-with-images-and-what） – Pete

您需要的: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

來源

2013-12-12 18:48:20

感謝扎克！這工作完美！剩下的唯一問題是它只能在Chrome中使用，而不能在Mozilla IE或Safari中使用。 – user3095615

您只需爲您希望支持的瀏覽器添加瀏覽器前綴即可。我更新了我的演示，他們應該工作 –

再次感謝Zach！作品高超！ – user3095615

CSS3菜單展開，懸停

回答

相關問題