让一个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显现。它只是没有显示出来。提前致谢！

来源

2013-04-08 zachstarnes

元素#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

Live example

来源

2013-04-08 18:12:24 jacktheripper

如果没有嵌套在'＃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

这是你DEMO之后是什么http://jsfiddle.net/kevinPHPkevin/wNdBw/

div { 
    display: none; 
} 

a:hover + div { 
    display: block; 
}

来源

2013-04-08 18:13:05 Vector

.container不是#account一个sibling它的一个孩子，所以你需要改用直接子组合子>

#account:hover > .container

jsFiddle

来源

2013-04-08 18:13:12 Adrift

为什么不使用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/ - 这是

问候，

拉胡尔。

来源

2013-04-08 18:15:06

让一个div在另一个悬停后出现

回答

相关问题