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>
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 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!