Re: Javascript Image Roll-over

>Or the CSS equivalent of providing :focus and :hover rules.
>
>   a:focus, a:hover { background-color: yellow }

Oh, but it gets better!

Eric Meyer and I had written, in research for my book:

>>>     So what it comes down to is a question of which states should 
>>>take precedence over others.  Is focus more "necessary" than 
>>>hover, or active?  That's really what I was asking you, as an 
>>>accessibility guru, to answer.
>>
>>I would say yes. You need to be able to tell where the focus is. 
>>That may necessitate making the focus state big-arse ugly so it can 
>>be spotted easily.
>
>    Right, but what if the focus style (for the sake of argument) is 
>just a color change.  I know it should be more, but let's say it's 
>just that.  Is it okay to put that style in the middle of the stack, 
>and have the hover and active styles override it during those 
>events? For example:
>
>a:focus {color: lime;}
>a:hover {color: red;}
>a:active {color: yellow;}
>
>So a focused link would be lime (ick).  When the user hovers it, 
>assuming they're using a mouse or other pointing device, it will 
>switch to red, but then when they move away it will go back to lime. 
>Similarly, the link will be yellow for the duration of the "click" 
>(or other activating action) and then should go back to lime.
>
>    A slightly more realistic example:
>
>a:focus {border: 2px dotted red;}
>a:hover {border: 2px solid #F99;}
>a:active {color: 2px solid red;}
>
>The same basic hierarchy of effects applies.  Is it acceptable to 
>have the hover and active styles temporarily override the focus 
>style, or are there accessibility reasons to always have the focus 
>style visible no matter what else is happening?  I guess that's my 
>real question.

I have not quite figured this out myself. Further, you can add 
:visited to the mix. I actually have the following in some of my 
stylesheets:

a:link
a:visited
a:hover
a:focus
a:visited:focus

and I am not sure that is the actually correct order. I should ask 
Eric. You can also do a:visited:hover, which I have used a couple of 
times.

Eric adds that the basic rationale is:

>Specificity. And which effect you want to overrule which others. See 
><http://www.meyerweb.com/eric/css/link-specificity.html> for the 
>long explanation. Let me know if it doesn't make sense.

And yes, it's pretty much a wank to use JavaScript for these functions.
-- 

     Joe Clark | joeclark@joeclark.org
     Accessibility <http://joeclark.org/access/>
     Weblogs and articles <http://joeclark.org/weblogs/>
     <http://joeclark.org/writing/> | <http://fawny.org/>

Received on Wednesday, 15 January 2003 15:38:57 UTC