Javascript 如何在悬停时显示另一个既不是同级也不是子级的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放在第1个div上。

尝试以下代码。。这可能会有帮助。但首先您必须添加jQuery库

$(".3rd").on('mouseover', function(){
   $(".4th").slideDown();
});

$(".3rd").on('mouseleave', function(){
   $(".4th").slideUP();
});

您还可以使用

.css（“显示”、“块”）

属性添加css。

---

希望能有所帮助。

在你的代码de

div

中是兄弟姐妹，不是相邻的而是兄弟姐妹

div div{
边框：实心1px红色；
}
.第四{
显示：无；
}
.第三：悬停~.第四{
显示：块；
}

第一
第二
第三

保险商实验室

第四

尝试使用常规同级选择器，该选择器将选择不立即继续元素的任何同级

.3rd:hover ~ .4th {
    /* styles here */
}

---

其中第一、第二、第三个是div，然后是ul，最后又是div。这些都在单亲div下检查这一点，其类似的场景，而不是更改颜色，您应该能够通过css设置可见性。它始终是您要显示的第四个div，还是始终是

ul

之后的第一个div？还是家长的最后一个div？你不应该让这里的人为你写代码。你至少应该自己试试，失败并寻求建议。你的这个问题要求我们为你编写整个代码。不需要CSS。我的意思是，我们可以使用.CSS属性，而不是slideUp和slideDown。对不起，我的意思是没有必要使用jQuery-我们有CSS属性来完成我们需要的工作。他说，如果无法使用CSS我们可以显示JavaScript吗