使用悬停的移动div

我需要这个代码的小帮助。我正在尝试创建一个菜单。我在jsFiddle 使用悬停的移动div

我的问题证明这是一个按钮（这是不是一个真正的按钮）继续移动，因为我在它悬停，有什么方法可以用来保持它在哪里？

下面是我的一些代码

<div id="start_bar"> 
     <div id ="start_button"> 
    Test 

      <div id="nav"> 
      Hello World 
      </div> 

     </div> 
    </div>

和CSS

#start_button{ 
height:48px; 
width:48px; 
background-image:url('images/start.png'); 
color:white; 
} 
#start_button:hover { 
height:48px; 
width:48px; 
background-image:url('images/start.png'); 
margin-top: -18px; 
} 

#nav { 
    display: none; 
} 
#start_button:hover > #nav { 
display: block; 
width: 70px; 
height: 150px; 
margin-top: -150px; 
background-color: grey; 
}

来源

2013-01-13 LegendaryLaggy

而不是使用margin-top: -Xpx;到菜单进入的地方，使它绝对定位为left: 0; bottom: 100%;。这将起作用，并且您不必为菜单或菜单栏输入像素高度。

Demo

一般情况下，要避免元素设置的高度。元素的高度应该尽可能地由内容决定。或者，在这种情况下，position: absolute; bottom: 100%;使元素向上100％相对坐标系的高度... position: absolute;也从文档流中释放元素。菜单随后可根据需要自由增加“更高”。

来源

2013-01-13 02:09:42 thirdender

摆脱你:hover伪选择的：

#start_button:hover { 
    margin-top: -18px; /* This causes it to shift up */ 
}

不这样做，它工作得很好： http://jsfiddle.net/qkGR4/3/

来源

2013-01-13 01:25:32 Blender

是的，但我想灰色框在黑线上，没有“测试”在其中 – LegendaryLaggy

@ user1951751：我不确定你的意思。 – Blender

我想实现类似于我所展示的内容，但是我不希望灰色框超出黑色线条，如果这使得任何意义:) – LegendaryLaggy

取下#start_button:hover

来源

2013-01-13 01:25:56 jhansen

的margin-top属性从#start_button:hover删除属性margin-top，增加#start_button:hover > #nav高度：

#start_button:hover { 
    height:48px; 
    width:48px; 
    background-image:url('images/start.png'); 
} 
#start_button:hover > #nav { 
    display: block; 
    width: 70px; 
    height: 131px; 
    margin-top: -150px; 
    background-color: grey; 
}

http://jsfiddle.net/qkGR4/5/

来源

2013-01-13 01:29:27

仍然不是我想要的，但更改此固定它'高度：130px;' – LegendaryLaggy

Ops 。我认为你希望在徘徊时看到“测试”按钮灰色。解决答案 –

使用悬停的移动div

回答

相关问题