Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2012
    Location
    Australia
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background Link Color?

    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.
    Last edited by buddieangel; 11-06-2012 at 04:35 AM. Reason: typo, more info

  • #2
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    You would use the pseudo class :hover for hovering, and for a gradient you would probably use a background image.
    Code:
     .menu_item
      { /* Normal style */ }
     .menu_item:hover
      { /* When mouseover. */ }

  • #3
    New Coder
    Join Date
    May 2012
    Location
    Australia
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @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?

  • #4
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    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:
    Code:
    .menu_item
      { background-color: Grey; }
    .menu_item:hover
      { background-color: Blue; }
    html file:
    Code:
     <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:
    Code:
     <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:
    Code:
     // 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; }

  • Users who have thanked Custard7A for this post:

    buddieangel (11-06-2012)

  • #5
    New Coder
    Join Date
    May 2012
    Location
    Australia
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ah I see, thank you so much for your help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •