Wie man ein anderes div auf Schwebeflug zeigt, das nicht Geschwister noch Kind ist

-1

Ich möchte ein div auf Schwebeflug anderen Tauchens zeigen, das nicht Geschwister noch Kind ist. Hier ist HTML-Struktur:Wie man ein anderes div auf Schwebeflug zeigt, das nicht Geschwister noch Kind ist

<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>

Jetzt möchte ich 4th div auf schweben von 3rd div zeigen. Kann mir jemand helfen, dies zu erreichen?

Ich habe mein Bestes mit CSS versucht, aber noch nicht erfolgreich. Wenn das mit CSS nicht möglich ist, dann kann jemand Javascript Code für mich schreiben, da ich Javascript nicht weiß.

HINWEIS: Dies ist eine Code-Struktur von Drupal CMS generiert, so dass ich die HTML-Code-Struktur nicht ändern kann, also bitte leiten Sie mich entsprechend.

Aber das ist möglich, 4. div an Stelle von 1. Div setzen, wenn Sie die Lösung so finden.

Quelle

2016-06-20 mithow

wo 1., 2., 3. sind divs und dann ist ul und zuletzt ist wieder div. Diese alle sind unter einem Elternteil div – mithow

Überprüfen Sie dies, http://stackoverflow.com/questions/12969131/hover-to-div-to-change-other-elements-style sein ähnliches Szenario, anstatt Farben zu ändern, sollten Sie sein in der Lage, Sichtbarkeit über CSS zu setzen. –

Ist es immer das vierte div, das du zeigen willst, oder ist es immer das erste div nach einer ul? Oder das letzte div im Elternteil? –

versuchen Sie folgenden Code .. es kann helfen. aber zuerst davon haben Sie jQuery-Bibliothek hinzufügen ...

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

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

und auch können Sie .css("display", "block") Eigenschaft verwenden und Ihre CSS hinzufügen. hoffe es hilft.

Quelle

2016-06-20 07:23:02

Keine Notwendigkeit für CSS mit diesem – midda25

Ich sage, dass anstelle von SlideUp und slideDown können wir verwenden. CSS-Eigenschaft. –

Sorry, was ich sagen wollte war, dass es keine Notwendigkeit für jQuery mit diesem gibt - wir haben CSS-Eigenschaften, um die Arbeit zu tun, die wir brauchen – midda25

In Ihrem Code de div sind Geschwister, nicht benachbart, aber Geschwister.

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: die Klassen können nicht mit einer Zahl

Quelle

2016-06-20 07:23:21 blonfu

Versuchen Sie, die allgemeine Geschwister-Selektor die Geschwister wählt starten, die nicht sofort das Element gehen.

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

Quelle

2016-06-20 07:25:08 midda25

Wie man ein anderes div auf Schwebeflug zeigt, das nicht Geschwister noch Kind ist

Antwort

Verwandte Themen