Hallo Peregrina,
man kann in der Tat auch mit Grid Elemente überlappen lassen, das ist hier gut erklärt:
https://mastery.games/post/overlapping-grid-items/
Es kann jedoch nicht schaden, wenn Du weißt, warum deine Version nicht funktioniert: Du hast das :hover der .boxtwo zugeordnet, diese ist jedoch im Ausgangszustand unsichtbar, so dass es nicht greifen kann. Am besten einen Container darum herum legen und diesem das :hover zuordnen, dann vermeidet man auch Probleme mit Flackern, die bei so etwas gern mal auftreten.
<!DOCTYPE HTML>
<html>
<head>
<title>divuebereinander</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <link rel="Stylesheet" type="text/css" href="css/design.css" /> -->
<style>
.boxone {
width: 300px;
height: 300px;
background-color: brown;
position: absolute;
}
.boxtwo {
width: 300px;
height: 300px;
background-color: lightblue;
position: relative;
display: none;
}
.wrapper:hover .boxtwo {
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="boxone"></div>
<div class="boxtwo"></div>
</div>
</body>
</html>
Alles anzeigen
Und wenn Du statt display die opacity änderst, kannst Du einen geschmeidigen Überblendeffekt erzielen.
Hallo Sempervivum,
natürlich weis ich, warum meine Version nicht funktioniert. Ich kann ja nicht boxtwo hovern, wenn Sie quasi unsichtbar ist, habe das ganze auch umgedreht versucht, also boxone den hover verpasst, doch das ging auch nicht. Vielen lieben Dank für deine Antwort. Ich habe allerdings jetzt auch eine gute Lösung gefunden, die funktioniert. Für alle die diese Thematik auch interessieren könnte stell ich mal meinen Code hier rein.
<!DOCTYPE HTML>
<html>
<head>
<title>divuebereinander</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="Stylesheet" type="text/css" href="css/design.css"/>
</head>
<body>
<div class="boxone"></div>
<div class="boxtwo"></div>
</body>
</html>
css ausgelagert
.boxone {
width: 300px;
height: 300px;
background-color: brown;
position: absolute;
}
.boxtwo {
width: 300px;
height: 300px;
background-color: coral;
position: relative;
display: none;
}
.boxone:hover + .boxtwo {
display: block;
}
Alles anzeigen
