SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background position - just one direction.

    Hi all

    I have a demo here - http://www.ttmt.org.uk/forum/controls

    It's a really simple <li> list using an image sprite as the backgrounds.

    controls.png

    The background-position on each <li> is adjusted to show each image.

    Code:
      ul li#one{
        background-position:0 0;
      }
      ul li#two{
        background-position:-25px 0;
      }
      ul li#three{
        background-position:-50px 0;
      }
      ul li#four{
        background-position:-75px 0;
      }
    On hover I'm adjust each <li> background-position upwards to show the red image.

    Code:
      ul li#one:hover{
        background-position:0 -25px;
      }
      ul li#two:hover{
        background-position:-25px -25px;
      }
      ul li#three:hover{
        background-position:-50px -25px;
      }
      ul li#four:hover{
        background-position:-75px -25px;
      }

    Is it possible to have one hover for all <li>'s and just move the background upwards.

    Something like.

    Code:
       ul li:hover{
          cursor:pointer;
          background-position:auto -25px;
        }
    So instead of calling each <li> I can just adjust the background
    position vertically and keep it's horizontal position

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    Why don't you try constructing the image so all the icons are lined up vertically? They would need to be interlaced (black followed by red, etc)
    Then set up the shift to be vertical by 25px for hover.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains


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
  •