javascript - 如何在悬停时显示另一个既不是兄弟也不是 child 的div

Question

我想在悬停在不是 sibling 或 child 的其他潜水时显示一个 div。这是 html 结构:

<div class="parent-div">
    <div class="1st">
        1st
    </div>
    <div class="2nd">
        2nd
    </div>
    <div class="3rd">
        3rd
    </div>
    <ul>
        ul
    </ul>
    <div class="4th">
        4th
    </div>
</div>

现在我想在 3rd div 悬停时显示 4th div。谁能帮我完成这个？

我已经尽力使用 CSS，但尚未成功。如果这对于 css 是不可能的，那么任何人都可以为我编写 javascript 代码，因为我不知道 javascript。

注意:这是由 Drupal CMS 生成的代码结构，因此我无法更改 html 代码结构，因此请相应地指导我。

但是如果您找到这样的解决方案，则可以将第 4 个 div 放在第一个 div 的位置。

Answer 1

在您的代码中，div 是 sibling ，不是相邻的而是 sibling 。

div div {
  border: solid 1px red;
}

.fourth {
  display: none;
}

.third:hover ~ .fourth {
  display: block;
}

<div class="parent-div">
  <div class="first">
    1st
  </div>
  <div class="second">
    2nd
  </div>
  <div class="third">
    3rd
  </div>
  <ul>
    ul
  </ul>
  <div class="fourth">
    4th
  </div>
</div>

PS:类不能以数字开头