Question

我遇到“a：active”根本无法正常工作的问题。另一方面，“a：悬停”正常工作。

/* CSS Document */
@charset "utf-8";

/* Main HTML Elements */
body {
	font-family: "Open Sans";
	font-size: 14px;
	
	background-color: #FFFFFF;
	color: #1B242D;
	
	width: 100%;
	height: 100%;
	
	margin: 0px;
	padding: 0px;
}

h1 {
	font-size: 26px;
	color: #FFFFFF;
}

h2 {
	font-size: 20px;
	color: #5EB59C;
}

h3 {
	font-size: 18px;
	color: #28BDEA;
}

h4 {
	font-size: 14px;
	color: #00ACDF;
}

/* Bart Specific */
#mainContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	
	padding: 0px;
	margin: 0px;
}

#topContainer {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 150px;
	
	background-color: #1B242D;
	
	z-index: 1;
}

#topBar {
	position: absolute;
	top: 0px;
	height: 5px;
	width: 100%;
	
	background-color: #00ACDF;
	overflow: hidden;
}

#headerContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	
	color: #FFFFFF;
}

#headerArrow {
	position: absolute;
	top: 150px;
	right: 65px;
	width: 0px;
	height: 0px;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	
	border-top: 60px solid #1B242D;
}

#headerText {
	position: absolute;
	bottom: 0px;
	left: 5px;
}

#TopNav {
	position: absolute;
	top: 5px;
	right: 35px;
}

#TopNav ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#TopNav ul li {
	display: inline-block;
}

#TopNav ul li a {
	display: block;
	padding-left: 10px;
	padding-bottom: 5px;
	padding-right: 10px;
	text-align: center;
	color: #FFFFFF;
	font-size: 16px;
	text-decoration: none;
	
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* #TopNav a:link {
	text-decoration: none;
} */

/* #TopNav a:visited {
	text-decoration: none;
	color: #FFFFFF;
} */

#TopNav ul li a:hover {
	text-decoration: none;
	font-weight: !important;
	color: #FFFFFF;
	background-color: #28BDEA;
}

#TopNav ul li a:active {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #00ACDF;
}

#midContainer {
	position: absolute;
	top: 160px;
	padding: 0px;
	margin: 0px;
	
	width: 100%;
}

#mainContent {
	position: absolute;
	width: auto;
	right: 305px;
	left: 10px;
	
	padding-bottom: 10px;
}

#contentSeparator {
	position: fixed;
	width: 1px;
	height: 80%;
	right: 295px;
	background-color: #8D9299;
}

#newsContainer {
	position: absolute;
	top: 50px;
	right: 25px;
	max-width: 250px;
	min-width: 250px;
	text-align: center;
}

#bottomContainer {
	position: fixed;
	bottom: 0px;
	
	background-color: #8D9299;
	width: 100%;
	height: 25px;
	
	color: #FFFFFF;
	
	text-align: center;
}

#footerContent {
	position: absolute;
	top: 3px;
	width: 100%;
	text-align: center;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

<link rel="stylesheet" type="text/css" media="screen and (max-width: 801px)" href="/css/p_mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 801px)" href="/css/p_def.css">

<link rel="stylesheet" type="text/css" href="/inc/fontawesome/css/font-awesome.min.css">
<script src="/inc/js/jquery-1.11.2.min.js"></script>
<script src="/inc/js/webfont.js"></script>


<title>Home</title>
</head>
<body>

<div id="mainContainer">
	<div id="topContainer">
		<div id="topBar"></div>
    	<div id="headerContainer">
    		<div id="headerArrow"></div>
    	    <div id="headerText"><h1>Page Title Here</h1><h4>...a very warm welcome to my personal portfolio website.</h4></div>
    	    <div id="TopNav">
            	<ul>
            		<li><a href="/index.html">Home</a></li>
            		<li><a href="/mywork.html">My Work</a></li>
            		<li><a href="/aboutme.html">About Me</a></li>
            		<li><a href="/contactme.html">Contact Me</a></li>
            		<li><a href="/docs/index.html">Documents</a></li>
            	</ul>
            </div>
    	</div>
	</div>
    
    <div id="midContainer">
    	<div id="mainContent">
          <p>Some Text Here</p>
        </div>
        <div id="contentSeparator"></div>
        <div id="newsContainer">
        	<div id="news_1">
            	<p>Some news here...</p>
                <hr>
                <p>Some more news here...</p>
            </div>
        </div>
    </div>
    
    <div id="bottomContainer">
    	<div id="footerContent">
        	Copyright Notice Here
        </div>
    </div>
</div>

</body>
</html>

我已多次尝试修复此问题，但它无法正常工作。我之前使用过这个，我把它设置得相同，并且在那里工作得很好，但由于某些原因不在这里。有线索吗？

谢谢！

修改：我现在已经添加了整页CSS和HTML，如果这有助于解决问题。谢谢你的帮助！

Answer 1

问题在于：

#TopNav a:hover {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #00ACDF;
}

#TopNav a:active {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #00ACDF;
}

如果你发现这两种状态没有区别。他们是一样的。活动类实际上适用于这种情况，但由于它与CSS方面的悬停状态相同，因此您在视觉上没有观察到差异。

因此，让我们稍微更改active州CSS。让我们在active状态下添加带有黑色文本的橙色背景。因此，课程将被修改如下：

#TopNav a:active {
    text-decoration: none;
    color: Black;
    background-color: orange;
}

现在，你可以发现它有效。只需观察一下，当您点击链接时，您可以看到具有橙色背景的锚链接，而文字会变为黑色，这是我们的active课程CSS指定的。

见以下工作：

＆＃13;

#TopNav {
	position: absolute;
	top: 5px;
	right: 35px;
    background-color: #1B242D;
}

#TopNav ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#TopNav ul li {
	display: inline-block;
}

#TopNav a {
	display: block;
	padding-left: 10px;
	padding-bottom: 5px;
	padding-right: 10px;
	text-align: center;
	color: #FFFFFF;
	font-size: 16px;
	text-decoration: none;
	
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#TopNav a:link {
	text-decoration: none;
}

#TopNav a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

#TopNav a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #00ACDF;
}

#TopNav a:active {
	text-decoration: none;
	color: Black;
	background-color: orange;
}

＆＃13;

<div id="TopNav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">My Work</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Contact Me</a></li>
    <li><a href="#">Documents</a></li>
  </ul>
</div>

＆＃13;

a：active不起作用a：悬停功能正常

1 个答案: