[英]css pseudo-class selector why not working on :focus div
When the mouse hover on the menus,the menu items can show up,but I want to use "Tab" key to focus on the menu and the menu items can show up,but it doesn't work,how can I fix it? 当鼠标悬停在菜单上时,菜单项会显示出来,但是我想用“Tab”键来关注菜单并且菜单项可以显示,但它不起作用,我该如何解决?
Here's HTML 这是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>
Here's css: 这是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;
}
If you have copied the code directly, what I see is that you have a space between your li and focus. 如果您直接复制了代码,我看到的是您的li和焦点之间有空格。 Please remove the spaces between :hover or :focus and the previous element and try again.
请删除之间的空格:hover或:focus和前一个元素,然后重试。
Adding a space means you are referring to a descendant element which is not the case. 添加空格意味着您指的是后代元素,而不是这种情况。
Try this, 尝试这个,
ul.hMenu li:focus div{
display:block;
}
And 和
ul.hMenu li:hover { background: yellow}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.