Nice little mouse-over CSS trick

Discussion in 'CSS' started by Perrow, Aug 12, 2005.

0
  1. #1
    While designing a site that needed a lot of mouse over text buttons (images with a little symbol and some text to be hi-lighted when hovered) I came up with a sweet little trick.

    Instead of using java-script to swap images I made the text to be hi-lighted invisible (gif transparent), and set the background to change on a:hover in the CSS.

    The effect is exactly the same but without an extra image to load and without the Java-script. In total, a lot of bytes less to load.
     
    Perrow, Aug 12, 2005 IP
    Smyrl, eiso and sji2671 like this.
  2. mopacfan

    mopacfan Peon

    Messages:
    3,273
    Likes Received:
    164
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Where can we see an example?
     
    mopacfan, Aug 12, 2005 IP
  3. sji2671

    sji2671 Self Made Mind

    Messages:
    1,991
    Likes Received:
    146
    Best Answers:
    0
    Trophy Points:
    170
    #3
    Thats a rather neat way of doing it, simple, effective and quicker.
    Nice tip Perrow
     
    sji2671, Aug 12, 2005 IP
  4. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You can do the same without the transparent gif, just use/don't use the background-image in your a:link or a:hover.
     
    Dji-man, Aug 12, 2005 IP
  5. Perrow

    Perrow Well-Known Member

    Messages:
    1,306
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    140
    #5
    Creating an example I found what appears to be a bug in FireFox handling of background colors. Try the example using both IE and FF and you'll see what I mean. Try it using Opera and you'll be amased how wrong it can get.

    After creating this example I looked at the page I was constructing and there it works for IE and FF so I added an image from that page for reference. Opera messes up the example file in a major way. However on the site's page there are two rows of images and there Opera only adds a 1 px line below the lower image.

    To conclude, if you want to highlight small (height wise) images and do not care about visitors using Opera then this might work for you. But if you want to use a larger image then use Java-script and preload your images. That is if noone can solve this and get it to work in both IE and FF for larger images.

    See update further down
     
    Perrow, Aug 13, 2005 IP
  6. Perrow

    Perrow Well-Known Member

    Messages:
    1,306
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    140
    #6
    But if you have a background image then the visitor must load that, using just transparent gif and background color you don't need that. But as I posted above, there seems to be some problem with the handling of background colors. :mad:

    This is not the update, it's even further down
     
    Perrow, Aug 13, 2005 IP
  7. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #7
    To work in Firefox you would need to set your <a> to {display:block;} and add a width attribute to match your image. This will undoubtedly display differently in IE.
     
    Arnica, Aug 13, 2005 IP
  8. Perrow

    Perrow Well-Known Member

    Messages:
    1,306
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    140
    #8
    Perfect, now it works like it should in all browsers. Just wait a sec and I'll update the example, or rather I'll make a new to show how it should be done :D

    Edit: Here is the new example.
     
    Perrow, Aug 13, 2005 IP
  9. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #9
    It will work the same way in IE if you set width in pixels - %'s won't work because of a bug in IE.

    Edit: here's a little example:

    http://forums.digitalpoint.com/showpost.php?p=87109

    J.D.
     
    J.D., Aug 13, 2005 IP
  10. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thought there was something - didn't have time to check before posting. On the ball as ever J.D.

    Mick
     
    Arnica, Aug 13, 2005 IP