不希望导航栏链接在点击时改变颜色（悬停效果）

Question

单击我的标题中的某个导航栏时，它们会在点击后更改颜色。更奇怪的是，我的主页和登录按钮不会改变，但其他人会这样做。

我想知道如何，因为它加深我的文字太移除这个效果。 （让我更具体：我不想让你看到文本后面的话背后的灰色着色）

我的HTML：

<h1 class = "name"><font color = "#3399FF"> Prog-Assist | </font><font size = "12" font color = "#4EA24E"> Where Collaboration is Welcomed</font></h1> 

<div id = "header"> 
    <div id = "gradient"> 
     <div class = "nav"> 

    <!-- container-fluid gives full width container of whole viewport --> 

    <div class = "container-fluid"> 

    <ul id = "nav1" class= "text-left"> 
     <li><a href = "main.html"><strong>Home</a></li> 
     <li><a href = "tech.html">Technologies</a></li> 
     <li><a href = "#">Programs</a></li> 
     <li><a href = "#">Blog</strong></a></li> 
    </ul> 

    <ul id = "nav2" class = "text-right"> 
     <li><a href = "#"><strong>Sign In</a></li> 
     <li><a href = "#">Contact</strong></a></li> 
    </ul> 

    </div><!-- end container-fluid--> 
     </div><!--end nav--> 
    </div> 
</div> <!-- end header --> 

我的CSS：

h1.name{ 

/*font-family: Lato, 'Courier Bold', sanserif;*/ 
font-family: 'KOMIKAX_'; 
src: url(KOMIKAX_.tff); 
font-weight: bold; 
font-variant: small-caps; 
    font-size: 60px; 
color: "red"; 
margin-left: 30px; 
text-shadow: 0 0 1px black; 

} 

#header { 
margin-left: 30px; 
width:cover; 
} 

#gradient { 
    height: 65px; 
border: 1px solid; 
/* IE 10 */ 
background-image: -ms-linear-gradient(top, #81a8cb 0%, #1947D1 100%); 

/* Firefox */ 
    background-image: -moz-linear-gradient(top, #81a8cb, #1947D1); 

/* Safari & Chrome */ 
    background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, #1947D1),color-stop(1, #81a8cb)); 

box-shadow: inset 0 0 15px black; 
} 



#nav1 { 

list-style: none; 

} 

#nav2 { 

list-style: none; 

} 

.nav a { 

text-decoration: none; /*remove underline*/ 
text-transform: uppercase; 
color: white; 
font-family: Rockwell, 'Courier Bold', serif; 
font-size: 20px; 
padding-bottom: 15px; 

} 

.nav li { 

display: inline; 
float: left; 
padding: 10px; 


} 

.nav a:visited { 
    text-decoration: none; 
    color: white; 
    font-weight:bolder; 
} 
.nav a:hover { 
    text-decoration: none; 
    color: #A7D1A7; 

} 
.nav a:active { 
    text-decoration: none; 
    color: #19A3FF; 
    font-weight:bolder; 

} 

Answer 1

.nav a:visited, .nav a:hover{background-color:transparent; text-decoration:none} 

如果仍然不工作，你可能有某种其他的CSS覆盖它的页面，那么你会使用！重要的黑客攻击。

.nav a:visited, .nav a:hover{background-color:transparent !important; text-decoration:none} 

Answer 2

使用css伪类。

/* unvisited link */ 
header a:link { 
    color: #FF0000; 
} 

/* visited link */ 
header a:visited { 
    color: #00FF00; 
} 

/* mouse over link */ 
header a:hover { 
    color: #FF00FF; 
} 

/* selected link */ 
header a:active { 
    color: #0000FF; 
} 

Answer 3

CSS伪类：访问是用来

a:visited{ text-decoration:none; color:#fff;}