我创建了一个导航,在悬停时为链接加下划线(从中间开始向外滑动下划线),并将链接从深绿色转换为浅绿色。这完全没问题,除非单击其中一个链接并变成“已访问”链接:当我重新单击已访问链接时,滑动下划线仍然有效,但颜色不会从深绿色变为浅绿色,它只是保持为深绿色。我已经尝试了所有我能想到的方法,但无法获得访问过的链接来像未访问过的链接一样转换它的颜色。
HTML:
<div id="topNavigation">
<ul>
<li><a href="encyclopedia.html">ENCYCLOPEDIA</a></li>
<li><a href="journal.html">JOURNAL</a></li>
<li><a href="society.html">SOCIETY</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div>
CSS:
#topNavigation a:link {
font-family:"Quicksand-Regular", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
position:relative;
color:#00590d;
text-decoration:none;
transition:color .35s;
-webkit-transition:color .35s;
}
#topNavigation a:hover {
color:#7ead34;
}
#topNavigation a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #7ead34;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
#topNavigation a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#topNavigation a:visited {
color:#00590d;
text-decoration:none;
}
你可以在这里看到我在说什么: http ://www.religionandnature.com/website2015/
访问了百科全书页面的链接,但颜色没有转换。其他链接没有被访问并且工作正常。任何建议表示赞赏。