So zeigen Sie das untergeordnete div-Element beim Mouse-Hover des übergeordneten div an

7

Ich habe eine Anzahl von übergeordneten divs (.parent_div), die jeweils eine untergeordnete div (.hotccontent) enthalten, wo ich Daten aus meiner Datenbank mit einer Schleife ausgabe.

Das Folgende ist mein derzeitiges Markup:

%Vor%

Was ich erreichen möchte, ist, wenn ein Benutzer ein Elternteil-div schwebt / überfährt, sollte der Inhalt des Kinddivs, das darin enthalten ist, aufgedeckt werden.

Um dies zu erreichen, habe ich das folgende jQuery-Skript geschrieben, aber es scheint nicht zu funktionieren. Es zeigt nicht einmal die Warnung!

%Vor%

Wie kann ich meinen vorhandenen Code ändern oder ersetzen, um die gewünschte Ausgabe zu erreichen?

    
Ashutosh Singh 10.05.2013, 09:56
quelle

8 Antworten

18

Wenn du reines CSS willst, kannst du es so machen ....

Im unten stehenden CSS verstecke ich beim Initialisieren / Laden der Seite das untergeordnete Element mit display: none; und dann mit hover des übergeordneten Elements, z. B. mit class parent_div , ich verwende display: block; für blende das Element ein.

%Vor%

Demo

    
Mr. Alien 10.05.2013, 09:59
quelle
4

Versuchen Sie es

%Vor%

Oder

%Vor%     
PSR 10.05.2013 09:58
quelle
3

Sie können css dafür verwenden,

%Vor%     
Sameera Thilakasiri 10.05.2013 09:59
quelle
3

Dies kann mit reinem css gemacht werden (ich habe ein paar Bits hinzugefügt, um es für das JSFIDDLE ein bisschen besser zu machen):

%Vor%

Dadurch wird sichergestellt, dass Ihre Website weiterhin auf die gleiche Weise funktioniert, wenn Benutzer JavaScript deaktiviert haben.

Demonstration: Ссылка

    
jezzipin 10.05.2013 10:15
quelle
1

Mit .hotqcontent wählen Sie jedes Element mit dieser Klasse aus. Sie möchten jedoch nur das Element .hotqcontent unterhalb des übergeordneten Elements auswählen.

%Vor%     
devnull69 10.05.2013 10:00
quelle
1
%Vor%

JSFIDDLE

    
Anton 10.05.2013 09:59
quelle
1

Sie benötigen document.ready function nicht in document.ready ..

probiere das

aus %Vor%

und ja, dein Code wird alle div mit der Klasse hotqcontent .. (was ich glaube, dass du das nicht brauchst) umschalten, wenn du das bestimmte div umschalten willst, dann benutze this reference, um das umzuschalten bestimmtes div

aktualisiert

Sie können ein delegiertes Ereignis für dynamisch generierte Elemente verwenden

%Vor%     
bipen 10.05.2013 09:58
quelle
0

Sie können dies versuchen:

%Vor%

});

    
akbar amani 10.05.2013 10:13
quelle