const menu = document.querySelector('.menu');
let menuOpen = false;
menu.addEventListener('click', () => {
if(!menuOpen) {
menu.classList.add('open');
menuOpen = true;
} else {
menu.classList.remove('open');
menuOpen = false;
}
}); * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
/* Cornice */
.menu2 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
/* Interno */
.menu1 {
font-size:55px;
color:#FFFFFF;
background-color: black;
transition: all .7s ease-in-out;
}
.tab {
color: transparent;
left: 30%;
transition: all .5s ease-in-out
}
a {
text-decoration:none;
color:white;
transition: all .5s ease-in-out;
}
/* animazione */
.menu.open .menu1 {
font-size:35px;
color: red;
transform: translateX(-180px);
background: transparent;
box-shadow: none;
}
.menu.open a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: flex;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
bEt4
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video src="video1.webm" autoplay loop playsinline muted></video>
<div class="menu2">
<div class="menu">
<div class="menu1">
<h1 style=" font-family:Consolas;">bEt4</h1>
</div>
</div>
<ul class="tab" style="left: 100px; top: 150px;;">
<li><a href="#" data-text="home">home</a></li>
<li><a href="#" data-text="archives">archives</a></li>
<li><a href="#" data-text="tags">tags</a></li>
<li><a href="#" data-text="categories">categories</a></li>
<li><a href="#" data-text="about">about</a></li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html> 當我單擊 menu1 名稱 (bEt4) 時，元素移動，鏈接到此操作，我需要使“a”元素的顏色從透明變為紅色。我認為這是 .menu.open 一個不起作用的部分，但也許我需要添加一些 js 或不同的 css 行。如果有人知道如何解決它，那將對我有很大幫助。提前感謝任何試圖提供幫助的人。
uj5u.com熱心網友回復：
您的“a”元素沒有改變的原因是因為在您的 css 中您正在對“.menu.open a”應用更改，但您的標簽位于 .menu div 之外并包含在 .menu2 div 中，因此如果您將 css 更改為“ .menu.open a" 到 ".menu2.open a" 它應該可以作業。
uj5u.com熱心網友回復：
嘗試將您的 css '.menu.open a' 替換為 '.menu2.open a' 并在您的 js 代碼中添加 menu2
我希望它對你有用：D
const menu = document.querySelector('.menu');
const menu2 = document.querySelector('.menu2');
let menuOpen = false;
menu.addEventListener('click', () => {
if(!menuOpen) {
menu.classList.add('open');
menu2.classList.add('open')
menuOpen = true;
} else {
menu.classList.remove('open');
menu2.classList.remove('open')
menuOpen = false;
}
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
/* Cornice */
.menu2 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
/* Interno */
.menu1 {
font-size:55px;
color:#FFFFFF;
background-color: black;
transition: all .7s ease-in-out;
}
.tab {
color: transparent;
left: 30%;
transition: all .5s ease-in-out
}
a {
text-decoration:none;
color:white;
transition: all .5s ease-in-out;
}
/* animazione */
.menu.open .menu1 {
font-size:35px;
color: red;
transform: translateX(-180px);
background: transparent;
box-shadow: none;
}
.menu2.open a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
bEt4
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video src="video1.webm" autoplay loop playsinline muted></video>
<div class="menu2">
<div class="menu">
<div class="menu1">
<h1 style=" font-family:Consolas;">bEt4</h1>
</div>
</div>
<ul class="tab" style="left: 100px; top: 150px;;">
<li><a href="#" data-text="home">home</a></li>
<li><a href="#" data-text="archives">archives</a></li>
<li><a href="#" data-text="tags">tags</a></li>
<li><a href="#" data-text="categories">categories</a></li>
<li><a href="#" data-text="about">about</a></li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/396423.html
標籤：javascript html css