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

如何使div在悬停时保持可见

2 个答案: