CODEWITHSUNDEEP
htmlcsshover
Aaria
Aaria

Reputation: 289

Hover not working on navigation bar links

I'm sure it's a simple fix. It's been a long time since I've made a website and am trying to make it so that when the user hovers over the links in the navigation bar to go green > This shade: #007D68, and when they are active to go orange > this shade: #F68E56. However somewhere along the line I've made an error.

HTML:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="EvositeCSS.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="wrapper">

<div id="NavBar">
<nav class="navbar navbar-default navbar-fixed-top">

        <div id="VictoriaHouse">
            <img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court">
        </div>
        <ul>
       <li> <a href="Evosite.html" id="NavHome"> Home </span> </a> </li>
       <li> <a href="#" class="NavLink"> News </a> </li>
       <li> <a href="#" class="NavLink"> Tenants </a> </li>
       <li> <a href="#" class="NavLink"> Heritage </a> </li>
       <li> <a href="#" class="NavLink"> About Us </a> </li>
       <li> <a href="#" class="NavLink"> Book the Meeting Room </a> </li>
       <li> <a href="#" id="NavContact"> Contact Us </a> </li>
       </ul>
    </div>
</nav> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->
</body>

</html>

CSS:

@charset "utf-8";
/* CSS Document */

#wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}

#VictoriaHouse {
padding-left:200px;
padding-top:20px;
padding-bottom:20px;
padding-right:120px;
float:left;
}

/* NavBar formatting */

ul {
float:inline-block;
padding-top:45px;
}

li {
display: inline;
}

a { 
font-family: Bree Serif;
font-size:20px
}

 a:link {
color:black;
background-color:white;
}

a:hover {
color: #007D68; /* Green */
}

a:active {
text-decoration:none;
color: #F68E56; /*orange */
}

a:visited {
color:black;
text-decoration:none;
background-color:white;
}

.NavLink {
margin-left:20px;
text-decoration:none;
}

#NavHome {
margin-left:30px;
}

#NavContact {
margin-left:20px;
}

Thanks.

Upvotes: 1

Views: 3471

Answers (4)

LOTUSMS
LOTUSMS

Reputation: 10290

There some misconceptions you need to be aware of.

First, you got the hover behavior working correctly. That was easy. Your misconception, and you are not alone. Many people share this with you, unless they are UI/UX engineers, then they would know :) is that :active represents the active page so they expect the link for the active page to be colored or styled as they expected. That is not right.

The .active pseudoclass is only represented when the link is active (as long as the event is running) to test it. set a:active {color: red} and then click and hold the link and you will see is red for as long as it is held. Meaning the event is not finished. When you release, it goes back to its natural state.

The right way to do this is to create an .active class and assign the respective styles you desire to that class. Then add the active class to that link whenever that page is current. You can do this via client side (JQuery or Javascript) or Server-side (PHP or ASP.NET) depending on your framework.

Another big tip I can give you. Avoid using IDs for styling. Use classes instead. IDs do not cascade and they are unique (only one per page) that makes it hard to style a website and specially to use globally. Reserve the use of IDs for server side functionality only.

I would post examples, but I think the information I just gave you lead you through the right path quite fine, specially since this is not your first rodeo :)

enter image description here

enter image description here

tested

corrected - follow link

Good luck!

Upvotes: 1

Aaria
Aaria

Reputation: 289

The solution I found was adding !important; to the elements that weren't working e.g. 

a:hover {
text-decoration:none;
color: #007D68; /* Green */
}

This doesn't work, when you hover over it, it's just the default blue underline. However when adding !important after the none, after text-decoration, it works.

My guess is that an element in the bootstrap navigation bar I am using was overwriting it.

If anyone has a more efficient solution then that would be welcome, however for now that solves my problem.

Upvotes: 1

lmgonzalves
lmgonzalves

Reputation: 6588

You are using the pseudo-classes in a wrong order. From here:

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

The correct order should be:

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

DEMO

Upvotes: 1

heartyporridge
heartyporridge

Reputation: 1201

font-color is an invalid property, color is the one you're looking for. Try:

a:hover {
  color: #007D68; /* Green */
}

Upvotes: 3

Related Questions