我在更改用于汉堡菜单的空 span 标签的颜色时遇到了问题。
虽然我对编码还很陌生，但我已经尝试了一些东西，所以非常感谢任何帮助。
// JavaScript Document
function toggleSidebar(ref) {
ref.classList.toggle('active');
document.getElementById('sidebar').classList.toggle('active');
}@charset "UTF-8";
/* CSS Document */
body {
font-family:optima;
}
body, html {
margin:0;
padding:0;
width: 100%;
height:100%;
}
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
}
body{
font-family:"Arial", Serif;
background-color:#f4f4f4;
overflow-x:hidden;
}
.text {
z-index: 2;
color: #FFFFFF;
position: absolute;
font-family: optima;
left: 50px;
top: 50px;
font-size: 30px;
letter-spacing: 4px;
font-weight:300;
}
#sidebar {
position:relative;
top:0px;
left:0px;
width:300px;
height:125vh;
background-color: transparent;
text-align:center;
transform-origin:left;
transform:perspective(1200px) rotateY(90deg);
transition:all 400ms ease;
z-index: 5;
}
#sidebar ul li {
color:white;
font-size:20px;
width:100%;
height:50px;
border-bottom:1px solid #222222;
line-height:50px;
}
#sidebar.active {
transform:perspective(1200px) rotateY(0deg);
}
#toggle-btn {
position:absolute;
left:30px;
top:20px;
transition:left 200ms linear 0ms,transform 300ms ease 100ms;
}
#toggle-btn.active {
left:230px;
transform:rotate(360deg);
}
#toggle-btn span {
position:relative;
top:0px;
display:block;
background:#1a1a1a;
width:30px;
height:5px;
margin:5px 0px;
cursor:pointer;
transition:transform 300ms ease 200ms;
}
#toggle-btn.active span:nth-child(1) {
top:10px;
transform:rotate(45deg);
}
#toggle-btn.active span:nth-child(2) {
opacity:0;
}
#toggle-btn.active span:nth-child(3) {
top:-10px;
transform:rotate(-45deg);
}
span {
z-index: 2;
background-color:white;
}
.sidebar {
color: white;
position: relative;
z-index :2;
}
.list {
color:white;
}
ul {
list-style:none;
}
}
}
ul li a:hover{
text-decoration: underline;
}
ul li:hover ul li{
display: block;
}
ul li ul li{
display: none;
}
#sidebar {
font-family: optima;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Melanie Pullen</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="openvid">
<video poster="road.jpg" autoplay="true" loop muted>
<source src="drive.mp4" type="video/mp4">
</video>
<div class="text">MELANIE PULLEN</div>
</div>
<div id="sidebar">
<ul>
<li><a>WORKS</a></li>
<li><a>INSTALLATION VIEWS</a></li>
<li><a>UPCOMING SHOWS</a></li>
<li><a>PRESS</a></li>
<li><a>BOOKS</a></li>
<li><a>BIOGRAPHY</a></li>
<li><a>CONTACT</a></li>
</ul>
</div>
<div id="toggle-btn" onclick="toggleSidebar(this)">
<span></span>
<span></span>
<span></span>
</div>
<script src="index.js"></script>
</body>
</html>提前致谢 我也想知道为什么 x 按钮不起作用
最佳答案
您需要使用 background-color 属性来改变颜色:
// JavaScript Document
function toggleSidebar(ref) {
ref.classList.toggle('active');
document.getElementById('sidebar').classList.toggle('active');
}@charset "UTF-8";
/* CSS Document */
body {
font-family:optima;
}
body, html {
margin:0;
padding:0;
width: 100%;
height:100%;
}
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
}
body{
font-family:"Arial", Serif;
background-color:#f4f4f4;
overflow-x:hidden;
}
.text {
z-index: 2;
color: #FFFFFF;
position: absolute;
font-family: optima;
left: 50px;
top: 50px;
font-size: 30px;
letter-spacing: 4px;
font-weight:300;
}
#sidebar {
position:relative;
top:0px;
left:0px;
width:300px;
height:125vh;
background-color: transparent;
text-align:center;
transform-origin:left;
transform:perspective(1200px) rotateY(90deg);
transition:all 400ms ease;
z-index: 5;
}
#sidebar ul li {
color:white;
font-size:20px;
width:100%;
height:50px;
border-bottom:1px solid #222222;
line-height:50px;
}
#sidebar.active {
transform:perspective(1200px) rotateY(0deg);
}
#sidebar ul span{
color:red;
}
#toggle-btn {
position:absolute;
left:30px;
top:20px;
transition:left 200ms linear 0ms,transform 300ms ease 100ms;
}
#toggle-btn.active {
left:230px;
transform:rotate(360deg);
}
#toggle-btn span {
position:relative;
top:0px;
display:block;
background-color:red;
width:30px;
height:5px;
margin:5px 0px;
cursor:pointer;
transition:transform 300ms ease 200ms;
}
#toggle-btn.active span:nth-child(1) {
top:10px;
transform:rotate(45deg);
}
#toggle-btn.active span:nth-child(2) {
opacity:0;
}
#toggle-btn.active span:nth-child(3) {
top:-10px;
transform:rotate(-45deg);
}
span {
z-index: 2;
background-color:white;
}
.sidebar {
color: white;
position: relative;
z-index :2;
}
.list {
color:white;
}
ul {
list-style:none;
}
}
}
ul li a:hover{
text-decoration: underline;
}
ul li:hover ul li{
display: block;
}
ul li ul li{
display: none;
}
#sidebar {
font-family: optima;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Melanie Pullen</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="openvid">
<video poster="road.jpg" autoplay="true" loop muted>
<source src="drive.mp4" type="video/mp4">
</video>
<div class="text">MELANIE PULLEN</div>
</div>
<div id="sidebar">
<ul>
<li><a>WORKS</a></li>
<li><a>INSTALLATION VIEWS</a></li>
<li><a>UPCOMING SHOWS</a></li>
<li><a>PRESS</a></li>
<li><a>BOOKS</a></li>
<li><a>BIOGRAPHY</a></li>
<li><a>CONTACT</a></li>
</ul>
</div>
<div id="toggle-btn" onclick="toggleSidebar(this)">
<span></span>
<span></span>
<span></span>
</div>
<script src="index.js"></script>
</body>
</html>关于html - 如何更改空 span 标签的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47840607/