CODEWITHSUNDEEP
htmlcsshyperlinknavigationhover
narue1992
narue1992

Reputation: 351

Don't want Navigation Bar links to change color when clicked (hover effect)

When clicking on one of my navigations in my header, they change colors once they have been clicked. What is even more weird is the fact that my Home and Sign In button doesn't change but the rest do.

I want to know how to remove this effect because it darkens my text too much. (Let me be more specific: I don't want the gray coloring behind the words that you see behind the text)

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

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

}

enter image description here

Upvotes: 1

Views: 4016

Answers (4)

Stefan Mitrović
Stefan Mitrović

Reputation: 11

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

Upvotes: 1

ClosDesign
ClosDesign

Reputation: 3924

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

If this still does not work you may have some sort of other CSS overwriting it in the page then you would use the !important hack.

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

Upvotes: 4

Sai
Sai

Reputation: 1949

css pseudo class :visited is to be used

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

Upvotes: 1

Ji_in_coding
Ji_in_coding

Reputation: 1701

use css pseudo classes.

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

Upvotes: 1

Related Questions