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

Question

我正在制作这样的主页：http: //jsbin.com/umaguc/1/，我目前正在处理下拉菜单。现在我想要的效果是：http ://www.script-tutorials.com/demos/249/index.html ；我有一个id="lavalamp"具有宽度、高度和背景颜色的 div（看起来像一个矩形）；当我悬停其中一个#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

看起来你已经使用了一个通用的兄弟选择器来 select #lavalamp，但该元素永远不会作为你的li元素的兄弟出现。

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