css伪类选择器为什么不工作：focus div答案

【问题标题】：css pseudo-class selector why not working on :focus divcss伪类选择器为什么不工作：focus div
【发布时间】：2013-07-05 14:33:08
【问题描述】：

鼠标悬停在菜单上时，菜单项可以显示，但我想用“Tab”键聚焦在菜单上，菜单项可以显示，但它不起作用，我该怎么办修好吗？

这里是 HTML

<ul class="hMenu">
        <li><a href="">prod1</a>
            <div>
                <a href="">test1</a>
                <a href="">test2</a>
                <a href="">test3</a>                    
            </div>
        </li>
        <li><a href="javascript:void(0);" >prod2</a>
            <div>                                               
                <a href="">test4</a>    
                <a href="">test5</a>                    
            </div>
        </li>    
    </ul>

这是css：

ul.hMenu li:hover a { color:red;}           
        ul.hMenu li div table{  background-color:yellow;}    
        ul.hMenu  { 
            margin: 0;
            padding: 0; 
            z-index: 1;                 
        }
        ul.hMenu li  {  
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
            width:140px;
        }
        ul.hMenu li a { 
            display: block; 
            text-align: left;
            text-decoration: none
        }          
        ul.hMenu li div  {                    
            position: absolute;             
            display: none;                
        }
        ul.hMenu div a {background: yellow;     
        }
        ul.hMenu li :hover   {  background: yellow}
        /**Mouse hover the menus can show up**/
        ul.hMenu li:hover   div{            
            display:block;
        }
        /**Why this line can not work when the "Tab" to focus on the menu？**/
        ul.hMenu li :focus  div{            
            display:block;
        }

【问题讨论】：

看看这是否对你有帮助。 stackoverflow.com/questions/3059203/tab-index-on-div
你想要this这样的东西吗？

标签： html css

【解决方案1】：

如果您直接复制了代码，我看到的是您的 li 和 focus 之间有一个空格。请删除 :hover 或 :focus 与前一个元素之间的空格，然后重试。

添加空格意味着您指的是后代元素，但事实并非如此。

【讨论】：

不只是 child 元素，而是所有 descendant 元素。
是的，无法反驳 :) - 已修复

【解决方案2】：

试试这个，

ul.hMenu li:focus  div{            
    display:block;
}

和

ul.hMenu li:hover   {  background: yellow}

【讨论】：

【解决方案3】：

应该这样做：

ul.hMenu li a:focus + div{            
        display:block;
    }

示例：Demo

和玩一下

 tabindex="myNumber"

在适当的 html 元素中:)

【讨论】：

是的，现在可以使用了，非常感谢。现在我想将菜单更改为：“当菜单聚焦并按回车键时菜单项将显示，然后按 Tab 选择菜单项，按 ESC 隐藏菜单项”，如何更改css代码？当我按下回车键时，我发现 :visited,:active 不起作用。
首先：如果某个答案对您有用，请将其标记为解决方案（已接受的答案）。这样，其他有类似问题的人不必搜索那么多:) 关于你的新愿望：看看this article
这是一个典型的解决方案，但实际上并不能解决问题。为什么 :focus 不使用链接或输入就不能工作？？