Question

我想显示其他潜水的悬停，不是兄弟也不是孩子。这是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>

现在我想在4th div的悬停时显示3rd div。任何人都可以帮助我实现这个目标吗？

我已经尽力使用CSS但尚未成功。如果css无法做到这一点，那么任何人都可以为我编写javascript代码，因为我不知道javascript。

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

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

Answer 1

在你的代码中，de div是兄弟姐妹，而不是邻近兄弟姐妹。

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 */
}

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

3 个答案: