在另一个 div 悬停后显示一个 div答案

【问题标题】：Make a div appear after another is hovered over在另一个 div 悬停后显示一个 div
【发布时间】：2013-04-09 02:20:17
【问题描述】：

当用户将鼠标悬停在一个单独的框上时，我试图让一个框出现。我无法让它工作。

这里是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 何时悬停。它只是没有出现。提前致谢！

【问题讨论】：

标签： html css

【解决方案1】：

元素 #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 Win、Saf 5.0 Win、Chrome 4、Chrome 5、Opera 10.10、Opera 10.53 和 Opera 10.60

Live example

【讨论】：

如果它没有嵌套在#account div 中会怎样。如果是在别的地方呢？就像在更远的地方和另一个区域一样。我试过用plus还是不行？它必须在 div 中吗？
我试过这样做，我将container放在html中的随机位置并删除了>，但它没有出现。
事实证明，你只能在兄弟元素或子元素上使用这样的选择器。

【解决方案2】：

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

div {
    display: none;
}

a:hover + div {
    display: block;
}

【讨论】：

【解决方案3】：

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

#account:hover > .container

jsFiddle

【讨论】：

【解决方案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/ - 在这里

问候，

拉胡尔。

【讨论】：