如何在悬停时显示另一个不是兄弟姐妹也不是孩子的 div

Question

我想在其他潜水的悬停上显示一个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>

现在我想在悬停4thdiv3rd上显示div。谁能帮我完成这个任务？

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

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

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

Answer 1

在你的代码中，dediv是兄弟姐妹，不是相邻的，而是兄弟姐妹。

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：类不能以数字开头

Answer 2

尝试以下代码.. 它可能会有所帮助。 但首先你必须添加jQuery库...

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

您还可以使用.css("display", "block")属性并添加您的 CSS。 希望对您有所帮助。

Answer 3

尝试使用通用同级选择器，该选择器将选择任何不立即处理元素的同级。

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