如何使用css点击li元素来显示div？

Question

使用CSS，有没有什么方法可以显示里面有元素的div？我不想为此使用任何JavaScript。

这是我的示例代码。

<ul> 
    <li id="help"> 
     Help 
     <div id="helpContainer"> 
      This is the help text content 
     </div> 
    </li> 
</ul> 

CSS

#helpContainer 
{ 
display:none; 
} 

这里是，我想显示helpContainer格李的点击（ID =帮助）

Answer 1

您必须使用JavaScript来操作DOM（文档对象型号）的页面。

This article介绍如何使用#anchor标签与puesdo-class：target CSS选择器（http://reference.sitepoint.com/css/pseudoclass-target）结合使用。这并不是真正做你想做的事情（你必须使用一个锚标签来命中新的＃标签来将页面置于不同的状态，而使用Javascript，你可以将一个监听器分配给你实际关心的对象上的onclick事件关于），我绝不会在实践中使用它。

Answer 2

CSS是用于样式的，因此，您可以使用它来操作DOM元素，因此，您将需要Javascript。

Answer 3

jsFiddle DEMO

下面是隐藏帮助，直到它需要一个CSS3方法。

要查看隐藏的帮助，请单击位于右下角的resize小部件，然后垂直向下拖动。

CSS3：

.help{ 
    background-color: lightblue; 
    width: 200px; 
    height: 25px; 
    min-height: 25px; 
    line-height: 25px; 
    max-height: 50px; 
    resize: vertical; 
    overflow: hidden; 
} 

.helpContainer { 
    background-color: yellow; 
    color: red; 
} 

Answer 4

正如我在评论中提到。您可以使用:target。

或者如果你想去没有:target。

#helpContainer{ 
    float: left; 
    display:none; 
    position: absolute; 
    padding-top: 20px; 
    top: 10px; 
} 

#help:active #helpContainer{ 
    display: block; 
} 

#helpContainer:hover{ 
    display: block; 
} 

我做了一个小演示。
http://jsbin.com/eyavuw/1/
（源代码）http://jsbin.com/eyavuw/1/edit

Answer 5

DEMODEMO2DEMO3

#helpContainer { 
    display: none; 
} 

li#help:hover div#helpContainer{ 
    display: block; 
} 
li#help:target div#helpContainer{ 
    display: block; 
}