> Working on a simple photo gallery that utilizes the :hover pseudo > class, but > it would be nice if a user could click a thumbnail and have the large > image > stay put. So, I wrapped the images in <a> tags and tried to use :focus, > but > this only worked in Firefox (3.6.8). IE7, Safari 5, Chrome all ignore > it, > even though my research led me to believe all the newer browsers > support > :focus. Can someone let me know what am I doing wrong?
I don't think you can have both. :focus does work, but as soon as the user hovers over another thumbnail then the :hover rule kicks in. If you increase the z-index of the :focus rule then the larger image will "stick", but that will also kill the :hover rule. To see that your :focus rule works, click on one of the thumbs and move your mouse away (mouseout) without hovering over other thumbs. As a side note, you should keep these rules the way they are because they allow keyboard users to access the larger pics. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
