Question

我无法在菜单栏的主页按钮上输入“a：hover”。甚至无法删除文字装饰。当我在尝试媒体查询时，我感到困惑。

****堆栈溢出设置不允许我发布问题，除非我添加更多细节*****

body {
	background-image: url("blue-bokeh.jpeg");
	width: 100%;
	height: 100%;
}

.wrap {
	height: auto;
	width: 90%;
	margin: auto;
}

header {
	background: #333;
	color: white;
	height: auto;
	width:100%;
	float: left;
}

header nav {
	width: 100%;
	height: auto;
}

header nav ul {
	list-style: none;
	height: auto;
	width: auto; /* what happens if i change the value to 100% */
	float: right;
	margin-right:30px;
}

header nav ul li {
	display: inline;
	padding: 15px 30px;
	float: left;
	border-radius: 5px;
}

header nav ul li a.active {
    text-decoration: none;
}

header nav ul li:hover {
	background-color: #111;
}

header nav ul li a.active:active {
    background-color: #4caf50;
}

.mainbody {
	/*background: tomato;*/  /* get the code checked , if its repeated in .top class */
	float: left;
	margin-top: 20px;
	border-radius: 10px;
	/*padding: 20px 20px;*/
	height: auto;
	width: 60%;
	margin-right: 2%;
}

.top {
	background: tomato;
	margin-bottom: 10px;
	float: left;
	border-radius: 10px;
	padding: 20px 20px;
}

.top h3 {
	color: darkslategray

}

.bottom {
	background: tomato;
	margin-bottom: 50px;
	float: left;
	border-radius: 10px;
	padding: 20px 20px;
}

.bottom h3 {
	color: darkslategray

}

.sidebar {
	float: left;
	height: auto;
	width: 38%;
	margin-top: 20px;

}

.topside {
	background: orangered;
	margin-bottom: 10px;
	border-radius: 10px;
	padding: 20px 20px;
}

.middleside {
	background: orangered;
	margin-bottom: 10px;
	border-radius: 10px;
	padding: 20px 20px;
}

.bottomside {
	background: orangered;
	margin-bottom: 10px;
	border-radius: 10px;
	padding: 20px 20px;
}

footer {
	background: darkslategray;
	float: left;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

footer p {
	padding-left: 50px;
}


/* ------------------------------------------------------------------------------------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------------------------------------------
	------------------------------------------------------MEDIA QUERY STARTS HERE---------------------------------------------------------------*/

@media screen and (max-width: 700px) {
    body {
    	background-image: url("blue-bokeh.jpeg");
    	width: 100%;
    	height: 100%;
    }
    
    .wrap {
    	height: auto;
    	width: 90%;
    	margin: auto;
    }
    
    header {
    	background: #444;
    	color: white;
    	height: auto;
    	width:100%;
    }
    
    header nav {
    	width: 100%;
    	height: auto;
    }
    
    header nav ul {
    	list-style: none;
    	height: auto;
    	width: 100%; /* what happens if i change the value to 100% */
    	margin: 0;
        padding: 0;
        text-align: center;
       
    }
    
    header nav ul li {
    	display: block;
    	padding: 15px 30px;
        float: none;
    }
    
    header nav ul li:hover {
    	background-color: #111;
    }
    
    header nav ul li a.active:active {
        background-color: #4caf50; 
    }
    
    .mainbody {
    	/*background: tomato;*/  /* get the code checked , if its repeated in .top class */
    	margin-top: 20px;
    	border-radius: 10px;
    	/*padding: 20px 20px;*/
    	height: auto;
    	width: 100%;
    }
    
    .top {
    	background: tomato;
    	margin-bottom: 10px;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    .top h3 {
    	color: darkslategray
    
    }
    
    .bottom {
    	background: tomato;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    .bottom h3 {
    	color: darkslategray
    
    }
    
    .sidebar {
    	height: auto;
    	width: 100%;
    
    }
    
    .topside {
    	background: orangered;
    	margin-bottom: 10px;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    .middleside {
    	background: orangered;
    	margin-bottom: 10px;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    .bottomside {
    	background: orangered;
    	margin-bottom: 10px;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    footer {
    	background: darkslategray;
    	float: left;
    	width: 100%;
    	height: auto;
    	border-radius: 10px;
    }
    
    footer p {
    	padding-left: 50px;
    }
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="restheme.css" type="text/css" rel="stylesheet">
</head>
<body>
	<div class="wrap">
		<header>
			<nav>
				<ul>
					<li><a class="active" href="#home">Home</a></li>
					<li>Portfolio</li>
					<li>Blog</li>
					<li>Contact Us</li>
				</ul>
			</nav>
		</header>
		<div class="mainbody">
			<article class="top">
				<h3>First Post</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			</article>

			<article class="bottom">
				<h3>Second Post</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			</article>
		</div>	
		<div class="sidebar">
			<aside class="topside">
				<h3>Top Sidebar</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</aside>

			<aside class="middleside">
				<h3>Middle Sidebar</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</aside>

			<aside class="bottomside">
				<h3>Bottom Sidebar</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</aside>
		</div>

		<footer>
			<p>Copyright &copy; 2016 Faltoo Webdesigns</p>	
		</footer>

	</div>
</body>	
	

</html>

Answer 1

如果我理解你，你想要达到这样的目标吗？

https://jsfiddle.net/j7j54Lta/1/

我做了一些改进并改变了结构。 li获取.active-class而不是锚。如果活动li中的锚点悬停，它会改变颜色（或任何你想要的颜色）：

header nav ul li.active a:hover{
  color: red;
  /* or whatever*/
}

此外，没有文字装饰：

header nav ul li.active a {
    text-decoration: none;
    cursor: default;
}

菜单栏中的活动链接不起作用

1 个答案: