如何讓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