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

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

这是html

<div class="division_left" id="account">
      <div class="container"></div>
      <span>Account</span>
</div>

我再次尝试让

容器

在

#account

悬停时显示。它只是没有出现。提前谢谢

元素

#account

是

.container

的父级，而不是它的同级-您需要“直系后代”选择器

，而不是“相邻同级”选择器

+

，即

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

而不是

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

对“直系后代”选择器的支持如下：

IE7，IE8，IE9 pr3，FF 3.0，FF 3.5，FF 3.6，FF 4b1，Saf 4.0胜利，Saf 5.0胜利、Chrome 4、Chrome 5、Opera 10.10、Opera 10.53和Opera 10.60

元素

#帐户

是

.container

的父级，而不是它的同级-您需要“直系后代”选择器

，而不是“相邻同级”选择器

+

，即

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

而不是

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

对“直系后代”选择器的支持如下：

IE7，IE8，IE9 pr3，FF 3.0，FF 3.5，FF 3.6，FF 4b1，Saf 4.0胜利，Saf 5.0胜利、Chrome 4、Chrome 5、Opera 10.10、Opera 10.53和Opera 10.60

---

这就是您想要的演示

---

这就是你想要的

---

.container

不是

#account

的子对象，因此您需要使用直接子对象组合器

#帐户：hover>.container

---

.container

不是

\account

的子容器，因此您需要使用直接子容器组合器

#帐户：hover>.container

---

为什么不改用JQuery悬停函数呢？比其他任何东西都要好和稳定。你也可以玩特效

HTML:

<div class="division_left" id="account">
  <div class="container" style="display:none"></div>
  <span id="showAccount">Account</span>
</div>

这将给你比常规CSS更好的效果

试试看，让我知道

或者，如果需要，我将添加JSFIDLE

更新：-在这里

问候,

---

Rahul.

为什么不改用JQuery悬停函数呢？比其他任何东西都要好和稳定。你也可以玩特效

HTML:

<div class="division_left" id="account">
  <div class="container" style="display:none"></div>
  <span id="showAccount">Account</span>
</div>

这将给你比常规CSS更好的效果

试试看，让我知道

或者，如果需要，我将添加JSFIDLE

更新：-在这里

问候,

---

Rahul.

如果它没有嵌套在

#account

div中会怎样？如果它在其他地方会怎样？比如再往下走，在另一个地方。我试过使用plus，但仍然不起作用？它一定要在div中吗？我尝试过这样做，我将

容器

放在html中的一个随机位置，并删除了

，但它没有出现。结果是，您只能在兄弟元素或子元素上使用类似的选择器。如果它没有嵌套在

#account

div中会怎么样？如果它在其他地方呢？比如再往下走，在另一个地方。我试过使用plus，但仍然不起作用？它必须在div中吗？我尝试过这样做，我将

容器

放在html中的一个随机位置，并删除了

，但它没有出现。结果表明，您只能在兄弟元素或子元素上使用类似的选择器。