Witam,
chciałbym zrobić, żeby po najechaniu na .button w .nav wyświetlił się .hover i dało się na niego najechać.
Jak chcę przejechać myszką z .button na .hover to .hover mi ucieka.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Podróże</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kolker+Brush&display=swap" rel="stylesheet">
<style>
:root{
--dark: #0a0a0a;
--blue: #26278a;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
color: white;
font-family: 'Lato', sans-serif;
}
body{
width: 100vw;
height: 100vh;
background: var(--blue);
background-image: url("blue.jpg");
background-size: cover;
background-position: center;
align-items: center;
justify-content: center;
display: flex;
position: relative;
overflow: hidden;
}
.container{
background: rgba(0, 0, 0, 0.55);
background: linear-gradient(45deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1));
backdrop-filter: blur(10px);
width: 70vw;
min-height: 70vh;
border-radius: 1.5vh;
animation: opacity linear 1s;
position: relative;
overflow: hidden;
}
a{
text-decoration: none;
}
h1{
text-align: center;
font-weight: 700;
color: white;
font-size: 28px;
margin-top: 10px;
}
@keyframes opacity{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.hamburger{
position: absolute;
background-color: transparent;
border: transparent;
padding: 10px;
top: 5px;
left: 15px;
display: inline-block;
cursor: pointer;
transition: .3s transform;
}
.hamburger-box{
position: relative;
width: 48px;
height: 24px;
display: inline-block;
}
.hamburger-line{
width: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: white;
height: 3px;
display: inline-block;
transition: background-color .3s;
}
.hamburger-line::before, .hamburger-line::after{
width: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: white;
height: 3px;
display: inline-block;
content: ' ';
transition: transform .2s .15s;
}
.hamburger-line::before{
top: -10px;
}
.hamburger-line::after{
top: 11.5px;
}
.hamburger-active{
transform: translateX(20vw);
}
.hamburger-active .hamburger-line{
background: transparent;
}
.hamburger-active .hamburger-line::before{
transform: translateY(10px) rotate(45deg);
}
.hamburger-active .hamburger-line::after{
transform: translateY(-11.5px) rotate(-45deg);
}
.nav{
height: 100%;
width: 20vw;
position: absolute;
top: 0;
font-size: 20px;
transform: translateX(-20vw);
border-radius: 20px;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
transition: transform .3s;
padding-top: 20px;
}
.menu{
list-style-type: none;
padding: 20px;
overflow: hidden;
}
.nav-active{
transform: translateX(0);
}
.button{
padding: 10px;
border-bottom: solid white 3px;
cursor: pointer;
}
.button-button{
background-color: transparent;
border: transparent;
font-size: 20px;
cursor: pointer;
}
.menu li:last-child{
border-bottom: none;
}
.logo{
text-align: center;
font-size: 30px;
font-weight: 700;
margin-top: 7px;
}
.hover{
position: absolute;
width: 15vw;
left: 21vw;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15));
border-radius: 10px;
transform: translateX(-36vw);
}
.hover ul{
list-style-type: none;
}
.button:hover .hover{
transform: translateX(0);
}
.hover:hover{
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container">
<main>
<div class="logo">
<a href="index.html">
Podróże
</a>
<button class="hamburger">
<span class="hamburger-box">
<span class="hamburger-line"></span>
</span>
</button>
<div class="nav">
<ul class="menu">
<li class="button"><a href="#">Madagaskar</a><span class="hover">
<ul>
<li>Stolica</li>
<li>Miasto</li>
<li>Plaża</li>
<li>Nie wiem</li>
<li>Słoń</li>
<li>Super</li>
<li>Zoo</li>
</ul></span></li>
<li class="button"><a href="#">Warszawa</a><span class="hover">
<ul>
<li>Stolica</li>
<li>Miasto</li>
<li>Plaża</li>
<li>Nie wiem</li>
<li>Słoń</li>
<li>Super</li>
<li>Zoo</li>
</ul></li>
<li class="button"><a href="#">Zanzibar</a><span class="hover">
<ul>
<li>Stolica</li>
<li>Miasto</li>
<li>Plaża</li>
<li>Nie wiem</li>
<li>Słoń</li>
<li>Super</li>
<li>Zoo</li>
</ul></li>
<li class="button"><a href="#">Los Angeles</a><span class="hover">
<ul>
<li>Stolica</li>
<li>Miasto</li>
<li>Plaża</li>
<li>Nie wiem</li>
<li>Słoń</li>
<li>Super</li>
<li>Zoo</li>
</ul></li>
<li class="button"><a href="#">San Francisco</a><span class="hover">
<ul>
<li>Stolica</li>
<li>Miasto</li>
<li>Plaża</li>
<li>Nie wiem</li>
<li>Słoń</li>
<li>Super</li>
<li>Zoo</li>
</ul></li>
</ul>
</div>
</div>
<div id="content">
<p>
</p>
</div>
</div>
</main>
<script>
var burger = document.querySelector('.hamburger');
var nav = document.querySelector('.nav');
var clicked = () => {
burger.classList.toggle('hamburger-active');
nav.classList.toggle('nav-active');
}
burger.addEventListener('click', clicked);
</script>
</body>
</html>
Z góry dziękuję za wszystkie odpowiedzi.
