使用：活動僞類顯示div

Question

我想單擊圖像時顯示div，但當我沒有點擊類似於此網站的圖像時，div id不會保留放置http://www.google.com/nexus/我的jsfiddle http://jsfiddle.net/7KJy4/。 請檢查我的代碼並更新，如果需要謝謝！我的html代碼包含一個簡單的div和列表項，並以行內顯示。當我單擊圖像時，我使用element：active來彈出，但是當我單擊圖像時，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/

這個計算策略的副作用 - 用戶可以按Tab鍵進入圖像，以便您的菜單可以通過鍵盤來激活。

如果你想要點擊沒有上述方法，你將不得不使用一些JS。