Forum Moderators: not2easy

Message Too Old, No Replies

Changing the opacity of a link with focus

         

Chuck McKnight

1:59 pm on Aug 18, 2009 (gmt 0)

10+ Year Member



I have a list styled to hold thumbnail images. Every item in the list is set to 50% opacity, and the hover and focus properties are set to 100% opacity. This way, when you mouse over a thumbnail or tab to it, it gains full opacity to set it out from the surrounding thumbnails.

It all works perfectly for hover, but for some reason it will not work for focus, even though the two are defined in exactly the same way.

How can I fix this?

Thanks in advance!

#thumb ul
{
padding: 0px;
margin: 0px;
float: left;
width: 100%;
}

#thumb ul li
{
display: inline;
}

#thumb ul li a
{
float: left;
width: 272px;
height: 204px;
margin: 0px 8px 16px 8px;
opacity: 0.5;
filter: alpha(opacity=50);
}

#thumb ul li a:hover, ul li a:focus
{
opacity: 1;
filter: alpha(opacity=100);
}

Chuck McKnight

3:33 pm on Aug 18, 2009 (gmt 0)

10+ Year Member



Oh goodness, this is so obvious, I can't believe I didn't catch it before. I just missed the "#thumb" for the focus.

Oh well. Mods, feel free to delete the topic. Sorry about that.

SuzyUK

4:05 pm on Aug 18, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>> delete
no need, question asked & answered, thanks for putting in the reply :)

glad you spotted it and sorted it for yourself, the act of separating out the code, or a second pair of eyes is good for things the validator wouldn't spot