CSS：当导航的<li>项被悬停时如何转换DIV？

Posted 2023-03-06

【中文标题】CSS：当导航的<li>项被悬停时如何转换DIV？

【英文标题】：CSS: How to transform DIV when <li> Item of Navigation gets :hovered?

【发布时间】：2021-08-07 21:56:17

【问题描述】：

我想用div-元素装饰水平导航，该元素会在导航下方“滑动”，具体取决于当前悬停的<li> 项目。

例子：

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) ;

---

挑战：直到现在我都无法确定我必须使用哪个 CSS 选择器来移动 div。我已经尝试了this approach 中提到的所有解决方案，但都没有奏效。

---

示例：

*  list-style-type: none; 

ul  display: flex 

a 
    display: block;
    padding: 1em;
    color: white;
    background-color: orange;


.red_circle 
    display: block;
    top: 100px;
  height: 50px;
  width: 50px;
    background-color: red;


li:nth-child(1):hover > .red_circle,
li:nth-child(1):hover + .red_circle,
li:nth-child(1):hover .red_circle,
li:nth-child(1):hover ~ .red_circle, 
    transform: translatex(400px);

<container>
    <ul>
            <li><a href="#">Test 1</a></li>
            <li><a href="#">Test 2</a></li>
            <li><a href="#">Test 3</a></li>
            <li><a href="#">Test 4</a></li>
    </ul>
    
    <div class="red_circle"</div>
    
</container>

【问题讨论】：

使用javascript mouseover事件监听器

@AhmadHabib：我更喜欢纯 CSS 而不是乱用 JavaScript... :-)

你不能用 CSS 做你想做的事。如果您只想在任何 li 元素悬停时滑动相同的红色 div，则可以通过将悬停在 ul 上并使用 CSS 同级选择器来获得相同的结果。但是，您是否希望根据悬停在哪个 li 元素上来滑动不同外观的元素？如果是这样，您需要更改 html 结构。

【参考方案1】：

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

如果有办法做到这一点，它会在当前的 CSS 选择器规范中：

Selectors Level 3 Spec

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

* 
  list-style-type: none;


ul 
  display: flex


a 
  display: block;
  padding: 1em;
  color: white;
  background-color: orange;


.red_circle 
  position: absolute;
  display: block;
  top: 100px;
  height: 50px;
  width: 50px;
  background-color: red;
  transition: transform 300ms;


li:nth-child(1):hover~.red_circle 
  transform: translatex(400px);

<container>
  <ul>
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>

    <div class="red_circle"> </div>
  </ul>

</container>

---

编辑： 看完HTML 5 standard

零个或多个 li 和脚本支持元素。 所以我在评论中说过你可以使用:beforepseudo 元素

* 
  list-style-type: none;


.list-container 
  padding-left: 40px;


ul 
  display: flex;
  padding: 0;
  width: max-content;


a 
  display: block;
  padding: 1em;
  color: white;
  background-color: orange;


ul:before 
  content: '';
  position: absolute;
  display: block;
  top: 100px;
  height: 50px;
  width: 50px;
  background-color: red;
  transition: transform 1s;


ul:hover:before 
  transform: translatex(400px);

<container>
  <div class="list-container">
    <ul>
      <li><a href="#">Test 1</a></li>
      <li><a href="#">Test 2</a></li>
      <li><a href="#">Test 3</a></li>
      <li><a href="#">Test 4</a></li>
    </ul>
  </div>

</container>

【讨论】：

我认为无序列表元素应该只有 li 元素作为子元素。

我同意在无序列表中你应该只有列表项但这种方法不会在li标签中添加圆圈，你也可以在:before伪元素中添加它

其实这个答案很好，但并没有完全解决最初的问题。 :-) 最初的目的是移动<div> 对应的<li> 项目悬停...悬停<li> 没有。 1 应该移动 100 像素，悬停没有。 2 应该移动 200 像素，依此类推...

哦，我的错，所以我认为第一个答案最适合您的问题 :)