Why does my navigation bar hover not work? - html

Question

I'm not sure why my hover effect isn't working on my navigation bar, and I was wondering if anyone can point out where I've went wrong?
Here is my html and css:
<div id="nav">
<a class="selected" href="Property%20Advisor.html">Home</a>AboutContact Us
</div>
#nav {
position: fixed;
top: 0;
width: 100%;
height: 7%;
margin: 0;
text-align: center;
font-family: rosario, sans-serif;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav a {
display: inline-block;
font-size: 100%;
padding-top: 1%;
padding-left: 2%;
padding-right: 2%;
margin: 0;
border: 0;
padding-bottom: 1%;
color: white;
text-decoration: none;
margin-right: 1px;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav homeHover a:hover, onCLick {
background-color: #44597F;
color:orange;
}
.selected {
background-color: #000000;
color: orange;
}
Here is a JSfiddle of my code:
http://jsfiddle.net/VDmh8/1/

Answer 1

http://jsfiddle.net/VDmh8/3/
You need to change:
#nav homeHover a:hover, onCLick {
background-color: #44597F;
}
to:
#nav a:hover {
background-color: #44597F;
background-image: none;
}
because for one, #nav homeHover a:hover would select a hovered upon a element within an element with tag name homeHover within #nav, which won't target the a elements that you want.
Also, you need to reset the background-image property that you set for your unhovered a.

Answer 2

You just messed up your CSS target.
JSFiddle
You're trying to change #nav a I presume, so all you need to do is use the CSS selector - #nav a:hover.
Setting a background gradient for both your nav and link elements is generally a bad idea. The two gradients will attempt to fit into different sized spaces and clash together. Instead, try creating a nav with a gradient, and then making transparant buttons above the nav, so you don't need to specify a new gradient. This is a bit difficult to explain, so check below:
For the navigation button, just leave out the background entirely when it isn't being hovered, and it will show the #nav color behind, like here.
As a more general example:
#nav{
/* gradients here! */
}
.button /* not hovered */
{
/* Don't set a background color - it will be transparant. */
}
.button:hover /*the same button when it's hovered. */
{
background: #123456;
}
(Also PS: never use something like height: 7%; for the nav. It ends up scaling improperly.
Use a definite height, like height: 48px.
If you really want to make a responsive website, a CSS Media Query would be better suited in this situation.

Answer 3

Why do you have a HomeHover in your css? That way, it looks for #nav, then a HomeHover tag inside the nav and then the anchor tag to match.
nav a:Hover will do.
The background-image seems to be drawn over the background-color. You need to set the background-image to something else on the hover.
nav a:hover {
background-color: #44597F;
background-image: none;
}
Fiddle