Guten Tag,
ich möchte gerne 2 Div-Elemente übereinander haben, mit seperaten Inhalten. Das "untere" Div-Element soll allerdings erst erscheinbar sein, wenn die Maus über das darüber liegende Div-Element gehalten wird.
Vor 2 Jahren hatte ich das Prinzip schonmal verwendet, jedoch weiß ich leider nicht mehr wie ich es damals genau gemacht habe.
Dort hatte ich jedoch im oberen Div ein Bild, und wenn man die Maus drauf gehalten hat, wurde ein Text angezeigt.
Ich kann leider nicht mit 'position: ...' arbeiten, daher fällt der z-index leider weg. (Wurde damals von mir aber zu 100% nicht verwendet)
Aktuell sieht der css-Part so aus:
.hauptbox{
min-height: 200px;
min-width: 200px;
max-height: 200px;
max-width: 200px;
background-color: #820e57;
float: left;
}
.zweitbox{
min-height: 200px;
min-width: 200px;
max-height: 200px;
max-width: 200px;
background-color: #fff;
}
.zweitbox:hover{
min-height: 200px;
min-width: 200px;
max-height: 200px;
max-width: 200px;
opacity: 0.0;
}
Alles anzeigen
das passende html dazu:
In der Theorie funktioniert das bisher ganz gut. Jedoch wird die zweite Box automatisch nach unten geschoben, sobald in der Hauptbox etwas steht.
Mit Margin und Padding konnte ich das bisher nicht lösen...
Es wäre toll wenn jemand weiß wie ich das ohne Script und z-index hinkriegen könnte.
Auf Bedarf kann ich den Link zur Test-Seite gerne teilen, damit man das ganze "live" sehen kann. (Um auch zu verstehen, wieso genau ich kein 'position' und z-index anwenden kann)
Mit freundlichen Grüßen
Alex