SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best Approach to Hover States on Form Buttons

    I have some form button images that require hover states and the text has to be displayed that's on the image.

    Everything I find on Google is all many years old and I was wondering what technique is the best to use these days. Although IE6 support is required, I guess I could convince people that the hover state wouldn't show in IE6 if this isn't possible.

    Any help would be greatly appreciated.

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    :active was the class IE used before it recognised hover. Requiring hovering to see something is poor design imo. If you use it, please define :focus which is like hover but happens when you hit that element with the keyboard.

    Code CSS:
    a:hover, a:focus {..}
    is a good method to get into using
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with the hover state, but it's not my call and there's no way to change it.

    I need to use either the INPUT or BUTTON element (no ANCHORS that require JavaScript). Know of a good technique for this?

    Maybe somehow using an <input type="image"> then using CSS to change the hover state with a different background position?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's an accessible input button replacement that works with images off. Ie6 gets hover via a small helper script.

    http://www.pmob.co.uk/temp/input-rollover-test.htm

    View source for the code and ask questions if you don't understand anything

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was EXACTLY what I was looking for. THANKS!!


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
  •