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的父级而不是其兄弟级别 - 您需要'直接后代'选择器>，而不是'相邻的兄弟'选择器，{{ 1}}，即

而不是

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

支持'直系后代'选择器如下：

IE 7，IE8，IE9 pr3，FF 3.0，FF 3.5，FF 3.6，FF 4b1，Saf 4.0 Win，Saf 5.0 Win，Chrome 4，Chrome 5，Opera 10.10，Opera 10.53和Opera 10.60

Live example

Answer 2

这就是您在DEMO http://jsfiddle.net/kevinPHPkevin/wNdBw/

之后所做的事情

div {
    display: none;
}

a:hover + div {
    display: block;
}

Answer 3

.container不是#account的{{1}}，因此您需要使用直接子组合>

#account:hover > .container

sibling

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

此致

的Rahul。

在另一个徘徊之后让div出现

4 个答案: