SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cannot get a:hover to move background

    Hello there,

    I am in need of getting my css code to work for my submit form button.

    Can anyone help?

    I have this site: Basic Colorado Flag T-Shirt | ActiveState Designs (long story why there's two buy now buttons, but just pay attention to the top one).

    I can't get the a:hover to work and change the background-position to 0 -30px. The class is "buy_button". Code is:

    Code:
    .buy_button {height:30px;width:160px !important;cursor:pointer;overflow:hidden;padding:0;border:0 none;background:url(images/buy_now.png) no-repeat top left;}
    a.buy_button:hover, a.buy_button:focus {background-position:0 -30px;}
    
    I HAVE ALSO TRIED:
    
    buy_button a:hover, buy_button a:focus {background-position:0 -30px
    Ideas? Thanks,
    Lorne

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The CSS for the hover and focus states won't work because the class is part of an input button and you have told your CSS to look for an anchor tag with the class of buy_button which it can't do. Simply remove the a from the selector and it will work fine.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SgtLegend,

    I appreciate the help. Although that didn't seem to work

    I tried this:
    Code:
    .buy_button {height:30px;width:160px !important;cursor:pointer;overflow:hidden;padding:0;border:0 none;background:url(images/buy_now.png) no-repeat top left;}
    .buy_button:hover input {background-position:0 -30px;}
    
    I ALSO TRIED:
    .buy_button:hover {background-position:0 -30px;}
    Neither worked Is it because the class is in the input field?

    Thanks,
    Lorne

  4. #4
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YES! I got it,

    I removed the input and it worked, however that didn't work the first time I tried it!

    Thanks for the help,
    Lorne


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
  •