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 没有办法让您从 li 返回到 DOM 以到达您的 #lavalamp。您可以使用 jQuery，或者您可以考虑重构标记的方式，使元素可通过纯 CSS 访问。