CSS :focus pseudo class 3

[1DMF]

I wanted to add the same :hover effect to the accesskeys to give a better visual indication of where IE7 has focused to and so thought i'd add #menu a:focus to my CSS.

only it is not working in IE7 , am I to take it this does not work in IE7 or have I coded it incorrectly..

#menu a:hover, #menu a:focus {
background: #787878;
color: #E6E6E6;
}

thanks 1DMF


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BillyRayPreachersSon]

While I can't say this is 100% accurate, I've a feeling that IE uses "active" instead of "focus"... or maybe it's the other way around? Anyway - try modifying your rule to be:

#menu a:hover, #menua:active, #menu a:focus

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Of course, you'll need a space between "#menu" and "a:active"...

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

Bingo! many thanks.

Though isn't the :active pseudo class meant to be for links you have 'just' clicked not ones you focus on?

so when you go back after clicking a link, it gives you a visual indication of the link you just clicked on?

or again is that me perceiving what is happening and what is really happening being two different things?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BillyRayPreachersSon]

You're thinking of the "visited" pseudo-class, I think.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

no , as that would affect all links visited on a page, I thought active was just the current one clicked so you could identify out of a page of link which one you just clicked on.

Especially if all links targeted a new window!

that way you could see, links not visited, links already visited, link you just clicked.

That was my view on how it worked, but hey wrong as uasual!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

The states are (for links specifically, although they work with all elements in modern browsers):

:link = regular link, not clicked before, not hovered, not having a focus and not being pressed.
:visited = link that has been visited within the history of the browser
:focus = link that has the focus (usually identified with a dotted rectangle)
:hover = link that has a mouse hovering over it
:active = link that is being pressed at that very time. Usually a split second while you hold down the mouse button clicking on the link

They should always follow the order given above and they work as they should in latest Gecko implementations. IE6 did not support the :focus pseudo class but instead used :active in the same context as other browsers use :focus -- meaning that IE6 lacked the effect of :active on other browsers. I have no idea how the support for IE7 and :focus is though, but you could easily make a test harness for it. I know Dan said most of this above, I just wanted to expand it and give you the correct order of pseudo classes (because it does matter).

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[1DMF]

Thanks Vragabond,

I knew about the order but was taught it via the
LoVe HAte , annotation, only Focus throws a spanner in that one!

You seem to be of the same opinion as me as to what the :active pseudo class meant.

I'm currently using this and it works fine...

.products a:hover, .products a:focus, .products a:active {
text-decoration: underline;
}

but I seem to have the focus & hover the wrong way round, but having said that I am not defining the link and visited so how does this order matter?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

Focus throws a spanner in[to LoVe HAte]

The focus-including mnemonic is way cooler (to the average geek anyway):

Lord Vader's Former Handle Anakin



-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

are you calling me a geek!

anyway Tiff in the office has come up with another one, I explained to her (she's in accounts) about the spanner in the works with the mnemonic and she just blurted out without a second thought "LoVe, F***, HAte"

she is so RUDE! lol , she must be bitter and twisted by life experience, but come to think about it, isn't that what happens with all our girlfriends / boyfriends that end up Ex's!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

I have really lame one to remember all of them (read it on a website once and it stuck in my mind):
Luther Vandross Finds Her Attractive
Maybe it stuck because it's so weird.

Anyway, the order does not matter in your case, since you have the same declaration for :hover, :focus and :active. You need to be careful when they are defined separately -- for instance, if :visited is set after :hover, your :hover will not work on visited links, because the later will always take precedence. So now try to think. If you have a focus on the link and you hover over it, which effect would you like to see? That of a hovered link or focused link? The one you want should be the latter.

And you can skip any and all pseudo classes, as long as the order stays the same. So you can say:

:link
:active

or

:visited
:focus

or

:hover
:active

All is valid, as long as the correct order is maintained.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[1DMF]

cool , thanks for that.

i like your mnemonic , though i wouldn't tell too many people you like Luther Vandross!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[toulouse07]

I think I need to set a focus state for a web site I worked on. Feedback is saying that when they click on a main menu item and get a sub menu that if they move the mouse just a little bit then they lose the main menu and sub menu focus.

Does the dotted triangle appear by default when you use the focus state or do you set it as a background image in the css file?

I like to stick with symbols that people know and recognize so if I have to set it as a background image does anyone know where I can get this as an image or something close to it?

 

[1DMF]

I'm not sure about a dotted triangle, it may depend on the shape of the object hyperlinked but the dotted border is an auto thing, no coding is required.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.