悬停和高度扩展时奇怪的css3错误

Question

我不知道我做错了什么，但显然它不起作用...我想悬停<li id="photo">，然后#sub-menu应该将其高度从65px扩展到{{1 }}

130px

简单但没有运行

http://jsfiddle.net/BrVuG/

知道我做错了吗？

Answer 1

问题是#photo:hover #sub-menu - 因为<li>不是子菜单div的祖先..而且在当前上下文中，当鼠标悬停在{时，目标#sub-menu无法通过{ {1}}因为它涉及回溯DOM（现在没有支持这样的组合器）。您只能通过定位后代或兄弟，而不是祖先来实现此效果。如果使用其他选择器，您将看到转换发生，例如

#photo

http://jsfiddle.net/BrVuG/2/

在目前的情况下，你想要做的事情是不可能的。

Answer 2

（Adrift所说的很少补充......）

如果你真的想用<li>做到这一点，你只有两个解决方案：

• 将#sub-menu放在<li>内或之后。很简单。我认为这样做更简单，特别是因为#nav-wrapper上有一个固定的位置和宽度。
• 使用javascript（<li>上的鼠标悬停操作将切换#sub-menu的宽度。）