a:active 还没有工作 a:hover 功能正常

Question

我遇到了 "a:active" 根本无法工作的问题。 "a:hover" 另一方面工作正常。

/* 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;
}

如果您观察，这两种状态之间没有区别。他们是一样的。在这种情况下，活动 class 实际上有效，但由于它与 CSS 的悬停状态相同，因此您在视觉上没有观察到差异。

所以，让我们稍微改变一下 active 状态的 CSS。让我们在 active 状态下添加带有黑色文本的橙色背景。所以 class 将修改如下：

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

现在，您可以观察到它起作用了。请注意，当您单击 link 时，您可以看到锚点 link 具有橙色背景，而文本根据我们的 active class 的 CSS.

查看下面的工作：

#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;
}

<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>

a:active 还没有工作 a:hover 功能正常

a:active doesn't work yet a:hover functions correctly

html

css

hyperlink