让一个div在另一个悬停后出现
问题描述:
我想让用户将鼠标悬停在单独的框上时显示一个框。我无法正常工作。让一个div在另一个悬停后出现
下面是HTML
<div class="division_left" id="account">
<div class="container"></div>
<span>Account</span>
</div>
这里是CSS
#account:hover + .container {
visibility: visible;
}
.container {
position: absolute;
visibility: hidden;
height: 300px;
width: 500px;
bottom: 40px;
left: 40px;
background-color: #fff;
border: 1px solid #000;
}
我再次试图让当#account
悬停在container
显现。它只是没有显示出来。提前致谢!
答
元素#account
是.container
父母,而不是它的兄弟 - 你需要的“嫡系”选择,>
,而不是“相邻的兄弟”选择,+
,即
#account:hover > .container {
visibility: visible;
}
而不是
#account:hover + .container {
visibility: visible;
}
支持的 '嫡系' 选择如下:
IE 7,IE8,IE9 PR3,FF 3.0,FF 3.5,FF 3.6,FF 4B1和SAF 4.0赢和SAF 5.0赢,铬4,铬5,歌剧10.10,歌剧10.53和Opera 10.60
答
这是你DEMO之后是什么http://jsfiddle.net/kevinPHPkevin/wNdBw/
div {
display: none;
}
a:hover + div {
display: block;
}
答
为什么不使用JQuery悬停功能呢?比别的更好,更稳定。你也可以玩特效。
HTML:
<div class="division_left" id="account">
<div class="container" style="display:none"></div>
<span id="showAccount">Account</span>
</div>
JQuery的:
$('#showAccount').hover(function(){
$('.container').toggle('fade');
});
这会给你比普通的CSS更好的效果。
试试吧,让我知道..
或者,如果你需要,我会添加的jsfiddle。
更新:http://jsfiddle.net/V8QbY/ - 这是
问候,
拉胡尔。
如果没有嵌套在'#account' div中,该怎么办?如果它在其他地方呢?像进一步下降,在另一个领域。我尝试使用加号,它仍然没有工作?它必须在div中吗? – zachstarnes 2013-04-08 18:15:18
我试过这样做,我把'容器'放在html的随机位置,并移除了'>',它没有出现。 – zachstarnes 2013-04-08 18:23:54
事实证明,你只能在兄弟姐妹或儿童元素上选择这样的选择器。 – jacktheripper 2013-04-08 18:28:51