Page 1 of 1

Advanced Keyboard Selector

Posted: Fri Feb 16, 2007 9:21 pm
by JAB Creations
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


The example code below works with with :hover but not :focus. I'm hoping someone can point out what I'm missing to get the keyboard to emulate the same behavior. Thanks!

[syntax="html"]<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS Keyboard Advanced Selector</title>
<style type="text/css">
#widget1:hover #widget2 {
background-color: #ddd;
display: block;
}
#widget1 a:focus #widget2 {
background-color: #ddd;
display: block;
}
div.prompt {
display: none;
}
</style>
</head>

<body>

<div id="widget1"><a href="#" tabindex="1">Widget One</a>
<div class="prompt" id="widget2"><a href="#" tabindex="2">Widget Two</a>
</div>
</div>

</body>
</html> 

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Fri Feb 16, 2007 9:29 pm
by superdezign
In which browser(s)? I think IE6 has a problem with :hover and :focus.

Posted: Fri Feb 16, 2007 9:35 pm
by JAB Creations
On XP the only browsers supporting :focus are Gecko browsers and so I only care to get this working on Firefox for example. Thank you.

Posted: Fri Feb 16, 2007 9:59 pm
by superdezign
Works fine for me....

Try this doctype, see if it makes a difference.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Posted: Fri Feb 16, 2007 10:23 pm
by JAB Creations
The doctype is fine. I'm trying to get the KEYBOARD to work in addition to the mouse and it's obvious that the mouse works and keyboard does not. It's a selector issue, please help me figure out the correct selector code!

Posted: Fri Feb 16, 2007 10:33 pm
by superdezign
You mean focus works when you click the link, just not when you tab to it?

Posted: Fri Feb 16, 2007 10:35 pm
by JAB Creations
Clicking is a mouse event, tabbing is a keyboard event. I am trying to get the keyboard (tab) event to display the second element.

To succeed show the second widget without using the mouse and only using the keyboard.

Posted: Fri Feb 16, 2007 11:07 pm
by superdezign
a:focus counts for both the mouse and tabbing. The only problems I can see are specificity, and not defining the other a pseudo properties.

There was a glitch where if you didn't assign a:active, a:hover wouldn't work. Try giving properties to a, a:link, a:visited, a:active, and a:hover.

Posted: Fri Feb 16, 2007 11:09 pm
by Kieran Huggins
You can't tab to a div by default - only input elements and links. So it's the A element that needs the hover / focus pseudo-class.