CSS3菜单展开，悬停消失

Posted 2023-05-08

【中文标题】CSS3菜单展开，悬停消失

【英文标题】：CSS3 Menu unfolds, dissapears on hover

【发布时间】：2013-12-30 23:23:45

【问题描述】：

我在 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);
 

【问题讨论】：

ouch text-indent: -999999px，使用 -9999px 已经够糟糕了，但是 999999？ Read this

【参考方案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

【讨论】：

谢谢扎克！这很完美！剩下的唯一问题是它只能在 Chrome 中运行，而不能在 mozilla IE 或 Safari 中运行。

您只需为您希望支持的浏览器添加浏览器前缀。我用他们更新了我的演示，他们应该可以工作

@user3095615 如果我已经满意地回答了您的问题，您能否单击我的答案左侧的复选标记将其标记为正确？