I would like to show a menu (like in the picture I made on figma). But when I do the :hover option it doesn't seem to find it, or at least it somehow doesn't work. I have no idea how I would even start with this, I tried most things, like changing the z-index and stuff, but it doesn't really seem to work.
html {
height: 100%;
overflow: hidden;
font-size: 10px;
}
body {
background: radial-gradient(ellipse at bottom, #303a49 0, #151628 100%);
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
color: #2f3234;
overflow: hidden!important
}
.space .solar-syst {
position: fixed;
zoom: 160%;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
color: #fff;
background-attachment: fixed;
opacity: 1;
}
.space .solar-syst div {
border-radius: 1000px;
top: 50%;
left: 50%;
position: absolute;
z-index: 9;
}
.space .solar-syst div:not(.sun) {
border: 1px solid rgba(102, 166, 229, .12)
}
.space .solar-syst div:not(.sun):before {
left: 50%;
border-radius: 100px;
content: "";
position: absolute
}
.space .solar-syst div:not(.asteroids-belt):before {
box-shadow: inset 0 6px 0 -2px rgba(0, 0, 0, .25)
}
.space .sun {
background: radial-gradient(ellipse at center, #ffd000 1%, #f9b700 39%, #f9b700 39%, #e06317 100%) -28px -103px;
height: 40px;
width: 40px;
margin-top: -20px;
margin-left: -20px;
background-clip: padding-box;
border: 0!important;
background-size: 175%;
box-shadow: 0 0 10px 2px rgba(255, 107, 0, .4), 0 0 22px 11px rgba(255, 203, 0, .13)
}
.space .sun:hover{
cursor: grabbing;
}
.space .mercury {
height: 70px;
width: 70px;
margin-top: -35px;
margin-left: -35px;
-webkit-animation: orb 7.18673s linear infinite;
animation: orb 7.18673s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .mercury:before {
height: 4px;
width: 4px;
background: #9f5e26;
margin-top: -2px;
margin-left: -2px
}
.space .venus {
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
-webkit-animation: orb 18.45553s linear infinite;
animation: orb 18.45553s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .venus:before {
height: 8px;
width: 8px;
background: #BEB768;
margin-top: -4px;
margin-left: -4px
}
.space .earth {
height: 145px;
width: 145px;
margin-top: -72.5px;
margin-left: -72.5px;
-webkit-animation: orb 30s linear infinite;
animation: orb 30s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .earth:before {
height: 6px;
width: 6px;
background: #11abe9;
margin-top: -3px;
margin-left: -3px
}
.space .earth:after {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 50%;
top: 0;
margin-left: -9px;
margin-top: -9px;
border-radius: 100px;
box-shadow: 0 -10px 0 -8px grey;
-webkit-animation: orb 2.24404s linear infinite;
animation: orb 2.24404s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .mars {
height: 190px;
width: 190px;
margin-top: -95px;
margin-left: -95px;
-webkit-animation: orb 56.42613s linear infinite;
animation: orb 56.42613s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .mars:before {
height: 6px;
width: 6px;
background: #cf3921;
margin-top: -3px;
margin-left: -3px
}
.space .jupiter {
height: 340px;
width: 340px;
margin-top: -170px;
margin-left: -170px;
-webkit-animation: orb 355.72282s linear infinite;
animation: orb 355.72282s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .jupiter:before {
height: 18px;
width: 18px;
background: #c76e2a;
margin-top: -9px;
margin-left: -9px
}
.space .saturn {
height: 440px;
width: 440px;
margin-top: -220px;
margin-left: -220px;
-webkit-animation: orb 882.69525s linear infinite;
animation: orb 882.69525s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .saturn:before {
height: 12px;
width: 12px;
background: #e7c194;
margin-top: -6px;
margin-left: -6px
}
.space .saturn:after {
position: absolute;
content: "";
height: 2.34%;
width: 4.676%;
left: 50%;
top: 0;
-webkit-transform: rotateZ(-52deg);
transform: rotateZ(-52deg);
margin-left: -2.3%;
margin-top: -1.2%;
border-radius: 50%;
box-shadow: 0 1px 0 1px #987641, 3px 1px 0 #987641, -3px 1px 0 #987641;
-webkit-animation: orb 882.69525s linear infinite;
animation: orb 882.69525s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s;
-webkit-animation-direction: reverse;
animation-direction: reverse;
-webkit-transform-origin: 52% 60%;
transform-origin: 52% 60%
}
.space .uranus {
height: 520px;
width: 520px;
margin-top: -260px;
margin-left: -260px;
-webkit-animation: orb 2512.4002s linear infinite;
animation: orb 2512.4002s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .uranus:before {
height: 10px;
width: 10px;
background: #b5e3e3;
margin-top: -5px;
margin-left: -5px
}
.space .neptune {
height: 630px;
width: 630px;
margin-top: -315px;
margin-left: -315px;
-webkit-animation: orb 4911.78386s linear infinite;
animation: orb 4911.78386s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .neptune:before {
height: 10px;
width: 10px;
background: #175e9e;
margin-top: -5px;
margin-left: -5px
}
.space .asteroids-belt {
opacity: .7;
border-color: transparent!important;
height: 300px;
width: 300px;
margin-top: -150px;
margin-left: -150px;
-webkit-animation: orb 179.95583s linear infinite;
animation: orb 179.95583s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s;
overflow: hidden
}
.space .asteroids-belt:before {
top: 50%;
height: 210px;
width: 210px;
margin-left: -105px;
margin-top: -105px;
background: 0 0;
border-radius: 140px!important;
box-shadow: //this is just so much shadow code//
}
.space .pluto {
height: 780px;
width: 780px;
margin-top: -390px;
margin-left: -390px;
-webkit-animation: orb 7439.70741s linear infinite;
animation: orb 7439.70741s linear infinite;
-webkit-animation-delay: -90s;
animation-delay: -90s
}
.space .pluto:before {
height: 3px;
width: 3px;
background: #fff;
margin-top: -1.5px;
margin-left: -1.5px
}
@-webkit-keyframes orb {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg)
}
}
@keyframes orb {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg)
}
}<main>
<div class="space">
<div class="stars" id="stars"></div>
<div class="stars2" id="stars2"></div>
<div class="stars3" id="stars3"></div>
<div class="solar-syst" id="solar-syst">
<div class="sun"></div>
<div class="mercury"></div>
<div class="venus"></div>
<div class="earth"></div>
<div class="mars"></div>
<div class="jupiter"></div>
<div class="saturn"></div>
<div class="uranus"></div>
<div class="neptune"></div>
<div class="pluto"></div>
<div class="asteroids-belt"></div>
</div>
</div>
</main>
<footer>
<div class="footer-text">
Co-Working © - Lukas, Nathan, Matti, Loran - Ghent 2021
</div>
</footer>