Hey hey,
ich arbeite mich gerade bei CSS animations ein und wollte in Zuge dessen ein Mini-Spiel bauen.
Dabei fliegen die rocks von rechts nach links, drehen sich dabei etc.
Jetzt will ich folgendes: Wenn ich über einen rock hover, soll er über die anderen rocks gehen - dafür habe ich etwas entsprechendes mit z-index eingetragen.
Ich hab schon in anderen Dokumenten etwas herum probiert, z-index bei hovern hat da immer funktioniert. Weiß jemand, wieso es hier nicht läuft?
Beste Grüße,
Gnomenschuh
HTML
<!DOCTYPE html><html>
<head>
<meta charset=utf-8>
<title>Aufgabe 3</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body>
<div class="stage" id="stage">
<div class="jet"><div class="spinner"><div class="rock"><h1>1</h1></div></div></div>
<div class="jet"><div class="spinner"><div class="rock"><h1>2</h1></div></div></div>
<div class="jet"><div class="spinner"><div class="rock"><h1>3</h1></div></div></div>
<div class="jet"><div class="spinner"><div class="rock"><h1>4</h1></div></div></div>
<div class="jet"><div class="spinner"><div class="rock"><h1>5</h1></div></div></div>
<div class="jet"><div class="spinner"><div class="rock"><h1>6</h1></div></div></div>
<div class="jet"><div class="spinner"><div class="rock"><h1>7</h1></div></div></div>
<div class="jet"><div class="spinner"><div class="rock"><h1>8</h1></div></div></div>
<div class="jet"><div class="spinner"><div class="rock"><h1>9</h1></div></div></div>
<div class="jet"><div class="spinner"><div class="rock"><h1>10</h1></div></div></div>
</body>
</html>CSS
.stage { background-color: black;
position: relative;
width: 1000px;
height: 600px;
margin: 10% auto;
overflow: hidden;
z-index: 2;
}
.rock h1 {
color: white;
font-size: 200%;
text-align: center;
padding-top: 30px;
}
.rock {
background-image: url(asteroid.png);
background-size: cover;
position: relative;
width: 160px;
height: 160px;
z-index: 10;
}
.spinner {
width: 160px;
height: 160px;
position: relative;
animation: rotate 3s infinite linear;
}
.jet {
width: 160px;
height: 160px;
position: absolute;
}
.rock:hover {
background-color: rgba(255, 0, 0, 0.75);
z-index: 9999 !important;
}
@keyframes move {
0% {transform: translate(0);}
100% {transform: translate(-2000px);}
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.jet:nth-child(1) {
animation: move 9s 0s linear infinite;
right: -1px;
top: 300px;
}
.jet:nth-child(2) {
animation: move 4s 1s linear infinite;
right: -600px;
top: 200px;
}
.jet:nth-child(3) {
animation: move 8s 2s linear infinite;
right: -600px;
top: 30px;
}
.jet:nth-child(4) {
animation: move 7s 2.3s linear infinite;
right: -600px;
top: 380px;
}
.jet:nth-child(5) {
animation: move 5s 3s linear infinite;
right: -600px;
top: 170px;
}
.jet:nth-child(6) {
animation: move 6s 4s linear infinite;
right: -600px;
top: 600px;
}
.jet:nth-child(7) {
animation: move 3s 5s linear infinite;
right: -600px;
top: 390px;
}
.jet:nth-child(8) {
animation: move 2s 6.4s linear infinite;
right: -600px;
top: 500px;
}
.jet:nth-child(9) {
animation: move 3s 7s linear infinite;
right: -600px;
top: 100px;
}
.jet:nth-child(10) {
animation: move 3s 20s linear infinite;
right: -600px;
top: 500px;
}