使一个div在另一个div悬停之后出现

Question

我试图使一个框出现，当用户悬停在一个单独的框。我用它有困难。

这里是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;
}

再次，我试图让container显示当#account悬停在上面。它就是没有出现。提前感谢!

Answer 1

元素#account是.container的父元素，而不是它的兄弟元素-您需要"直系后代"选择器>，而不是"相邻兄弟"选择器+，即

#account:hover > .container {
    visibility: visible;
}

不是

#account:hover + .container {
    visibility: visible;
}

对'direct descendants '选择器的支持如下:

ie7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf5.0 Win, Chrome 4, Chrome 5, Opera 10.10, Opera 10.53和Opera 10.60

生活例子

Answer 2

这就是你要的DEMO http://jsfiddle.net/kevinPHPkevin/wNdBw/

div {
    display: none;
}
a:hover + div {
    display: block;
}

Answer 3

.container不是#account的兄弟它是子元素，所以你需要使用直接子组合子>

#account:hover > .container

jsFiddle

Answer 4

为什么不使用JQuery的Hover函数呢?比其他任何东西都好，都稳定。你也可以使用特效。

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/-这里是

问候,

拉胡尔。