1

使用 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

4

5 回答 5

1

演示 演示 2演示 3

#helpContainer {
  display: none;
}

li#help:hover div#helpContainer{
  display: block;
}
li#help:target div#helpContainer{
  display: block;
}
于 2013-01-10T10:43:19.590 回答
1

jsFiddle 演示

这是一个 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;
}
于 2013-01-10T09:38:57.647 回答
1

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

于 2013-01-10T09:41:43.990 回答
0

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

于 2013-01-10T09:16:42.743 回答
-1

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

本文介绍如何使用 #anchor 标记和 puesdo-class :target CSS 选择器 (http://reference.sitepoint.com/css/pseudoclass-target)。不过，这并没有真正做到您想要的（您必须使用锚标记来点击新的 # 标记以将页面置于不同的状态，而使用 Javascript 您可以只为您真正关心的对象上的 onclick 事件分配一个侦听器关于），我永远不会在实践中使用它。

于 2013-01-10T09:12:41.877 回答