SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div with background hover

    I have a div which holds my nav bar, the css for which looks like this

    #topnav{
    background-image: url(../pics/topnav_bg.gif);
    width: 100%;
    height: 20px;
    }

    I want to place my links right aligned in it and have a hover effect which uses a background image called pics/topnav_bg_hover.gif.

    Can anyone tell me how to do this?

    Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I've nearly sussed it but my problem lies with the hover effect. I've specified width 50px, if I don't the whole bar changes or if I remove display:block; then the hover image just appears behind the text and not the full 20px height.

    Here's the css, what can I do to avoid specifying 50px?

    div#toplink{
    background-image: url(../pics/topnav_bg.gif);
    height: 20px;
    font-family: Verdana, Helvetica, Arial;
    font-size: x-small;
    color: #808080;
    text-align: right;
    }
    div#toplink a:link{
    background-image: url(../pics/topnav_bg.gif);
    height: 20px;
    font-family: Verdana, Helvetica, Arial;
    font-size: x-small;
    color: #808080;
    text-align: right;
    }
    div#toplink a:hover{
    display: block;
    width: 50px;
    background-image: url(../pics/topnav_bg_hover.gif);
    height: 20px;
    font-family: Verdana, Helvetica, Arial;
    font-size: x-small;
    color: #FFFFFF;
    text-align: right;
    }

  3. #3
    SitePoint Enthusiast Incubator's Avatar
    Join Date
    Apr 2002
    Location
    Good old Belgium
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im sorry for bumping in here, but would you mind if I ask you a small question?
    how do you make your navbar dissappear again when the onmouseout even occurs? ive been figuring that out for a long time now, but couldnt find this in any code
    for your question you might try this:

    in the element where your link is displayed you could add an onmouseover event and make a new #navover css style

    and then write:

    onmouseover="this.style='#navover';"
    "Press any key to continue. Press any other key to exit."

  4. #4
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no need for javascript if you write your css correctly.

    If you look at my css above, it states the div has a background image (which is only 1px wide btw) and I call in a different one only when hovering. I'm trying to avoid the use of js anywhere on this redesign.


Bookmarks

Posting Permissions

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