CODEWITHSUNDEEP
htmlcss
fraserky
fraserky

Reputation: 93

Why does my navigation bar hover not work?

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><a     href="PropAbout.html">About</a><a href="PropContact.html">Contact Us</a>
 </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/

Upvotes: 1

Views: 4799

Answers (3)

Alexander
Alexander

Reputation: 4219

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.

enter image description here

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.

Upvotes: 1

Ben Jackson
Ben Jackson

Reputation: 11922

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.

Upvotes: 2

Izaaz Yunus
Izaaz Yunus

Reputation: 2828

  1. 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.

  1. 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

Upvotes: 1

Related Questions