如何更改空span标签的颜色

问题描述 投票：0回答：4

我无法更改我用于汉堡菜单的空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按钮不起作用

html css drop-down-menu menu
4个回答
0
投票

您需要使用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>
0
投票
#toggle-btn > span {
    background-color: red;
}

上面的规则使用id="toggle-btn"来定位父母的跨度子项。

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>span {
  background: red !important;
}

#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;
}
<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>
0
投票

您可能想要阅读有关CSS Specificity的更多信息。

你的span选择器没有#toggle-btn span那么具体，所以#toggle-btn span的这个属性将覆盖来自span的那些。

我将span选择器更改为#toggle-btn.active 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);
}

#toggle-btn.active 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>
0
投票

你的span CSS规则被另一条规则覆盖：#toggle-btn span，它也定义了背景颜色。由于#toggle-btn span比span具有更多的特殊性，它将覆盖span。

为避免这种情况，只需为自定义样式使用相同的选择器：

#toggle-btn span {
  background-color: white;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.