如何让div在其上悬停时可见

Question

我有一个包含按钮的菜单，如果您将鼠标悬停在上面，则会在其上方显示一个“弹出”按钮。 我的问题是，我想要div可见，如果用户将鼠标移到“弹出”。有没有人有关于如何继续的一些提示？ http://jsfiddle.net/c6fYt/

HTML

<div id="footer"> 
     <ul id="list"> 
      <li class="button">Button 1</li> 
      <li class="box">AWBGBABBgehahnaphneaneihnahipneanpen</li> 
     </ul> 
    </div> 

CSS

#footer { 
position:absolute; 
bottom:1px; 
width:100%; 
min-width:800px; 
height:50px; 
background-color:rgba(255, 255, 255, 0.3); 
box-shadow:0px 0px 1px rgba(0, 0, 0, 1.0) inset, 0px 10px 5px 1px rgba(255, 255, 255, 0.1) inset, 0px 35px 20px rgba(255, 255, 255, 0.2) inset; 
} 


#list { 
list-style:none; 
display:inline; 
} 

.button {/*box-shadow: h-shadow v-shadow blur spread color inset;*/ 
width:125px; 
background-color:rgba(248, 248, 255, 0.25); 
border-right:1px solid rgba(255, 255, 255, 0.7); 
margin:1px 0px 0px 0px; 
padding:15px 0px; 
text-align:center; 
float:left; 
color:rgba(0, 0, 0, 1.0); 
} 

.button:hover { 
background-color:rgba(248, 248, 255, 0.45); 
} 

.button:hover + .box { 
display:block; 
} 

.box { 
background-color:rgba(0,0,0,0.4); 
width:auto; 
min-width:50px; 
height:250px; 
margin-top:-250px; 
margin-left:-125px; 
float:left; 
display:none; 
} 

Answer 1

.button:hover + .box, .box:hover { 
    display:block; 
} 

小提琴：http://jsfiddle.net/c6fYt/1/

Answer 2

你不能在CSS中只有做到这一点，因为它会失去它的能见度曾是不再徘徊（如果这是我所理解的）

由于只有几行的jQuery，你可以绕过这个问题：

$('.button').hover(function() 
{ 
    $('.box').show(); 
} 

）;

JSFiddle