Question

我想在点击图片时显示div，但是当我没有点击类似于此网站http://www.google.com/nexus/ my jsfiddle http://jsfiddle.net/7KJy4/的图片时，div ID不会保留。请检查我的代码并更新，如有必要，谢谢！我的html代码包含一个简单的div和列表项显示为内联。我使用了element：当我点击图片时弹出窗口，但当我点击图片时，div不能让用户点击导航链接。http://jsfiddle.net/7KJy4/

我的HTML

<div id="hover">
<img src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/menu-24-24.png">
  <div id="menu">
  <a href=""><li>Menus</li></a>
  <a href=""><li>Menus</li></a>
  <a href=""><li>Menus</li></a>
  <a href=""><li>Menus</li></a>
  </div>
</div>

my css 
*
{
margin:0;
padding:0;
}
#hover
{

width:100px;
height:300px;

}
#hover:active > #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;

}
#menu
{
visibility:hidden;
}
li
{

}

Answer 1

如果您想在纯CSS中执行此操作，则必须使用:focus代替:active并关注图像：

#hover > img:focus + #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;

}

您还需要在图像中添加“tabIndex”，以便它可以获得焦点。

DEMO： http://jsfiddle.net/7KJy4/1/

此approch的副作用 - 用户可以使用Tab键进入图像，这样您的菜单也可以通过键盘激活。

如果你想在没有上述方法的情况下点击它，你将不得不使用一些JS。

使用：active伪类显示div

1 个答案: