10 Replies Latest reply: Jun 23, 2011 12:59 PM by Nancy O. RSS

    CSS for a rollover sprite

    phyllisj9 Community Member

      Okay, here's a CSS question.

       

      I want to use a little icon next to a link and have that icon change when the link is hovered over.  I've set this up with a tiny sprite:

       

      http://phyllis.fellowshipx.org/spriteicon.html

       

      Question:  Is my CSS good on that?  It seems to work, but I'm wondering if it's going to cause any problems anywhere.  Should I be declaring a height?

       

      Also, when I click this link in Firefox, it makes a really wide selection marquee.  Should I be declaring a width?  I'm worried about listing a width/height since my font is in ems (and I guess that could expand and create problems?).

       

      I think this works okay but wanted to know if anyone had any suggestions on better ways to write the code for it.

       

      Thanks, Phyllis

        • 1. Re: CSS for a rollover sprite
          Nancy O. CommunityMVP

          Looks good.  You can add height & width in ems without penalty.

           

          /**this is applied to all link states**/

           

          a:enlargeicon {
               width: 8em;
               height: 1.5em;
               background-image: url(enlarge.gif);
               background-repeat: no-repeat;
               padding-left: 20px;
               display:block;
          }

          /**if link and visited have same styles, use a comma**/

           

          a.enlargeicon:link,
          a.enlargeicon:visited {
               color: #013976;
               background-position: 0px 0px;
          }

           

          /**don't forget the focus**/

           

          a.enlargeicon:hover,
          a.enlargeicon:active,
          a:enlargeicon:focus {
               color: #C37C00;
               background-position: 0 -19px;
          }

           

          Nice to see Sprites!  I wish more people used them. :-))

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists 
          http://alt-web.com/
          http://twitter.com/altweb

          • 2. Re: CSS for a rollover sprite
            phyllisj9 Community Member

            Thanks Nancy!

             

            I love sprites.  I hate to see tons of Javascript everywhere.  I don't know why I was thinking I shouldn't use ems on overall height and width, but I'll add that in there.

             

            And you've reminded me I don't know what "focus" is about (for some reason, my classes have never mentioned it, though I've seen it here and there).  I'll go look it up!

             

            Thanks, Phyllis

            • 3. Re: CSS for a rollover sprite
              phyllisj9 Community Member

              Just found this article on how to get rid of the huge marquees:

              http://css-tricks.com/829-removing-the-dotted-outline/

               

              I guess if I use that technique I need to put in "focus" everywhere?

               

              Thanks, Phyllis

              • 4. Re: CSS for a rollover sprite
                phyllisj9 Community Member

                Wow, that was a major improvement on my site.  I've got curved links which showed rectangles around them when they were clicked (as they're done with sprites). Probably means I can improve some of the coding too (got a hidden span class that I can condense now that I don't have to worry about the ugly marquee).

                 

                yay!

                • 5. Re: CSS for a rollover sprite
                  Nancy O. CommunityMVP

                  If you use the tab key to reach a link, that is the focus state (active in IE) with the dotted outline to show users where they are on the page.  As "CSS-Tricks" says, hover, active and focus often use the same style.

                   

                   

                  Nancy O.

                  • 6. Re: CSS for a rollover sprite
                    phyllisj9 Community Member

                    Thanks, it's been hard for me to wrap my brain around how that was different from active.  I don't navigate by tabs!

                     

                    Should focus always be at the end?  I know this order is important:

                     

                    1. link
                    2. visited
                    3. hover
                    4. active

                     

                    Wonder why focus was never even mentioned in my classes.  Maybe because they never told us how to get rid of the outline...

                     

                    Thanks, Phyllis

                    • 7. Re: CSS for a rollover sprite
                      Nancy O. CommunityMVP

                      Wonder why focus was never even mentioned in my classes.

                       

                      You can blame Microsoft for this.  Back in the days when 90% of people used Internet Explorer as their primary web browser,  Pre-IE8 browsers treated focus as active.  Since IE didn't support focus correctly, many web designers (instructors included) either didn't know what focus was for or they didn't care.  In any case, IE9 correctly supports focus.

                       

                      Although an old article, this demonstrates the differences:

                      http://sonspring.com/journal/active-vs-focus-links

                       

                       

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists 
                      http://alt-web.com/
                      http://twitter.com/altweb

                      • 8. Re: CSS for a rollover sprite
                        phyllisj9 Community Member

                        Thanks for all the great info!  :-)

                         

                        I'm planning to go into my site and add focus everywhere.  :-)

                        • 9. Re: CSS for a rollover sprite
                          phyllisj9 Community Member

                          By the way, just saw this article that says focus should go in the middle:

                          http://reference.sitepoint.com/css/pseudoclasses

                           

                          1. link
                          2. visited
                          3. focus
                          4. hover
                          5. active

                           

                          As usual, I don't totally understand the logic.   But I like the mnemonic: "Las Vegas Fights Hell’s Angels."  :-D

                           

                          If you know of a good reason that the order should be different, please let me know!  Although I think I'll probably always keep focus, hover, and active the same so it shouldn't matter.  But maybe I'll play around with what happens when they're different.

                           

                          Thanks, Phyllis

                          • 10. Re: CSS for a rollover sprite
                            Nancy O. CommunityMVP

                            I learned it this way.

                             

                            For best cross browser results, when setting the style for several link states, there are some order rules:

                            • a:hover MUST come after a:link and a:visited
                            • a:active MUST come after a:hover

                             

                            Link

                            Visited

                            Hover

                            Active

                             

                            Given the above rules, you could put focus in the middle and it should work.

                             

                             

                             

                            Nancy O.
                            Alt-Web Design & Publishing
                            Web | Graphics | Print | Media  Specialists 
                            http://alt-web.com/
                            http://twitter.com/altweb