CSS - 将鼠标悬停在 li 元素上时执行转换（下拉菜单）

Question

我正在制作这样的主页：http://jsbin.com/umaguc/1/，我目前正在处理下拉菜单。现在我想要的效果是：http://www.script-tutorials.com/demos/249/index.html;我有一个 div id="lavalamp"，它有宽度、高度和背景颜色（看起来像一个矩形）；当我 悬停 #nav ul li 元素之一（如主页、离线游戏、在线游戏、电子竞技、音乐...）时，我希望移动此 #lavalamp div 并更改其宽度，以便看起来就像我上面提到的效果。 这是我的代码的想法：

#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 39px;
}

#nav li:nth-of-type(2):hover ~ #lavalamp {
    left:110px;
    width:110px;
}

但遗憾的是，它只是行不通。当我将鼠标悬停在 #nav ul li 元素上时，没有任何变化！希望你们能帮我解决这个问题.. 非常感谢！

Answer 1

您似乎使用了general sibling selector 来选择#lavalamp，但该元素从未作为li 元素的同级元素出现。

不幸的是，我不相信 CSS 有办法让您爬回 DOM 以从 lis 访问您的 #lavalamp。您可以使用 jQuery，或者您可以考虑重组标记的方法，使元素可以通过纯 CSS 访问。