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

Posted 2023-05-08

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

【英文标题】：CSS - perform transition when hover over li element (dropdown menu)

【发布时间】：2013-07-30 14:57:45

【问题描述】：

我正在制作这样的主页：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 元素上时，没有任何变化！希望你们能帮我解决这个问题.. 非常感谢！

【问题讨论】：

能把你用的html贴出来吗？

对不起^^我刚刚更新了我在jsbin链接中使用的html和css。

检查script-tutorials.com/pure-css3-lavalamp-menu，就像 raddevon 说的那样，您的 lavalamp div 似乎不在应有的位置。

好的，我修好了，一切正常。非常感谢！

【参考方案1】：

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

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