Html CSS：如何在<；李>；导航项：是否悬停？

我想用一个

div

-元素装饰一个水平导航，该元素在导航下方“滑动”，具体取决于当前悬停的

项目

例如：

li:nth-child(1):hover { transform: translateX(100px) };
li:nth-child(2):hover { transform: translateX(200px) };
li:nth-child(3):hover { transform: translateX(300px) };
li:nth-child(4):hover { transform: translateX(400px) };

---

挑战：直到现在，我还无法根据移动

div

来确定必须使用哪个CSS选择器。我已经尝试了中提到的所有解决方案，但没有一个有效

---

示例：

*{列表样式类型：无；}
ul{display:flex}
a{
显示：块；
填充：1em；
颜色：白色；
背景颜色：橙色；
}
.红濸圈{
显示：块；
顶部：100px；
高度：50px；
宽度：50px；
背景色：红色；
}
李：第n个孩子（1）：悬停>.red\u圆圈，
李：第n个孩子（1）：悬停+。红色圆圈，
李：第n个孩子（1）：悬停。红色圆圈，
李：第n个孩子（1）：悬停~。红色圆圈{
转换：translatex（400px）；
}

目前无法在CSS中选择元素的父元素

如果有办法的话，可以在当前的CSS选择器规范中找到：


但要实现这一点，您可以修改html，将红色圆圈标记为
ul
标记


*{
列表样式类型：无；
}
保险商实验室{
显示器：flex
}
a{
显示：块；
填充：1em；
颜色：白色；
背景颜色：橙色；
}
.红濸圈{
位置：绝对位置；
显示：块；
顶部：100px；
高度：50px；
宽度：50px；
背景色：红色；
转换：转换300ms；
}
李：第n个孩子（1）：悬停~红色圆圈{
转换：translatex（400px）；
}







使用javascript
mouseover
事件listener@AhmadHabib：我更喜欢纯CSS，而不是乱搞JavaScript…：-）你不能用CSS做你想做的事情。如果您只想在任何li元素悬停时滑动相同的红色div，您可以通过将悬停放置在ul上并使用CSS同级选择器来获得类似的结果。但是，您是否希望根据悬停在哪个li元素上而使外观不同的元素滑动？如果是这样的话，你需要改变HTML结构。我认为无序列表元素应该只有li元素作为子元素。我同意在无序列表中应该只有列表项，但这种方法不会在
li
标记中添加圆圈，您还可以将其添加到
：before
伪元素实际上这个答案很好，但它并不能完全解决最初的问题。：-）最初，它的目的是移动与悬停的
项相对应的
。。。悬停
1号应移动100像素，悬停2号应移动200像素，依此类推……哦，糟糕，所以我认为第一个答案最适合您的问题：）