Background Link Color?

[buddieangel]

Hi, I am not sure how to explain this so I used MS paint to make a (bad quality) image of what I'm trying to ask how to do:

http://img141.imageshack.us/img141/4564/menuything.png

the purple section is the rest of the webpage. I guess basically I want to make it so the links in the navigation bar change background color upon mouse hover. BUT also I want the background of both without mousehover and with mousehover to have a gradient background, not a flat background.

how can I do this?
EDIT: like the first example here: http://www.exploding-boy.com/images/...s/menus.html#2

thanks

p.s I want it to be so the whole line in the navigation bar changes color, not just the area behind the text.

[Custard7A]

You would use the pseudo class :hover for hovering, and for a gradient you would probably use a background image.

 .menu_item
  { /* Normal style */ }
 .menu_item:hover
  { /* When mouseover. */ }

[buddieangel]

@Custard7A: Thanks although could you please help me with how to use that code? I applied it but it changes the color of the whole navigation bar - how do I make it so it's the background of just the selected link on mouseover?

[Custard7A]

Of course, sorry if I wasn't clear. First of all, did you apply the code to each individual element?
Maybe this example is more understandable:

css file:

.menu_item
  { background-color: Grey; }
.menu_item:hover
  { background-color: Blue; }

html file:

 <section>
  <a class="menu_item" href="/"> Home </a>  <!-- Styles being applied to each link. -->
  <a class="menu_item" href="/"> Home </a>
  <a class="menu_item" href="/"> Home </a>
</section>

However, if your links are inside other elements that represent each "box" in the menu, you would need to apply the hover style to those elements instead.

html file:

 <ul>
  <li class="menu_item"> <a href="/"> Home </a> </li> <!-- Styles applied to the containing element. -->
  <li class="menu_item"> <a href="/"> Home </a> </li>
  <li class="menu_item"> <a href="/"> Home </a> </li>
</ul>

There is a pitfall to beware in the above example. Although this would highlight the whole list item on mouseover, only the link element has functionality as a link. This means that you can mouseover the list item and it will highlight, giving the impression you can click and something will happen, but it will only work when your mouse is truly over the link! Consider you apply a background color to your link element — which I believe you mentioned — and it only has a section of color behind the text, that is the boundaries of the link. Clicking around the edges won't work, and it will only confuse people if the whole thing changes color when they mouseover.

The solution is to make your link elements block level elements, and use them similarly to my first html example.
The below css assumes the top html example in this post is the target html.

css file:

 // We can make the link itself be the whole navigation item.
a.menu_item
  { display: block; // The only important part, the rest is for example.
     width: 200px;
     height: 40px;
     border: 1px solid Black;
     text-align: center;
     padding: 10px;
     background-color: Grey; }

a.menu_item:hover
  { background-color: Blue; }

[buddieangel]

ah I see, thank you so much for your help!