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

Posted 2023-03-06

【中文标题】不希望导航栏链接在单击时更改颜色（悬停效果）

【英文标题】：Don't want Navigation Bar links to change color when clicked (hover effect)

【发布时间】：2015-03-04 13:54:27

【问题描述】：

单击标题中的一个导航时，一旦单击它们就会改变颜色。更奇怪的是，我的“主页”和“登录”按钮没有改变，但其余按钮却改变了。

我想知道如何消除这种效果，因为它会使我的文字变暗太多。 （让我更具体一点：我不希望你在文本后面看到的单词后面的灰色）

我的 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;

【参考方案1】：

 .nav a:visited, .nav a:hoverbackground-color:transparent; text-decoration:none

如果这仍然不起作用，您可能有某种其他 CSS 在页面中覆盖它，那么您将使用 !important hack。

 .nav a:visited, .nav a:hoverbackground-color:transparent !important; text-decoration:none

【讨论】：

谢谢。我想知道是否有一个术语可以用来使悬停背景颜色为空。当我被允许时，我会勾选这个（计时器说我必须等待）

【参考方案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;

【讨论】：

对不起。我的意思是悬停颜色效果。我会改标题

悬停效果可以在a:hover中设置

那么如何将悬停设置为“无”？我的问题是删除它。我当前的代码对背景颜色没有任何颜色效果

如果您已经定义了元素的外观。将 :hover 效果定义为与您为其常规外观定义的效果相同。并且悬停时您不会感觉到差异。

【参考方案3】：

css伪类:visited是要使用的

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

【讨论】：

悬停灰色仍然以这种方式显示。我有一个 a:visited ，但我的图像中没有显示“背景色”效果

【参考方案4】：

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