Question

使用CSS，有没有办法在li元素中显示div？我不想使用任何javascript。

这是我的示例代码。

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

CSS

#helpContainer
{
display:none;
}

在这里，我想点击li（id = help）

显示helpContainer div

Answer 1

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 2

正如我在评论中提到的那样。您可以使用: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 3

DEMO DEMO2 DEMO3

#helpContainer {
  display: none;
}

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

Answer 4

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

Answer 5

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

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

如何使用css显示单击li元素的div？

5 个答案: