如何在懸停時顯示另一個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>

現在我想顯示4th上的懸停格3rd格。 誰能幫我實現這一目標？

我已盡力使用CSS，但尚未成功。 如果css無法做到這一點，那么任何人都可以為我編寫javascript代碼，因為我不知道javascript。

注意：這是Drupal CMS生成的代碼結構，因此我無法更改html代碼結構，因此請相應地指導我。

但是，如果您找到這樣的解決方案，則可以將第4個div放在第一個div上。

Answer 1

在您的代碼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 */
}