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）をクリックするとhelpContainerdivが表示されます

4

5 に答える 5

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 に答える
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 に答える
0

CSSはスタイリング用であるため、CSSを使用してDOM要素を操作できます。そのためには、Javascriptが必要になります。

于 2013-01-10T09:16:42.743 に答える
-1

ページのDOM（Document Object Model）を操作するには、Javascriptを使用する必要があります。

この記事では、＃anchorタグをpuesdo-class：target CSSセレクター（http://reference.sitepoint.com/css/pseudoclass-target）と組み合わせて使用​​する方法について説明します。ただし、これは実際には希望どおりに機能しません（アンカータグを使用して、新しい＃タグをヒットし、ページをさまざまな状態にする必要がありますが、Javascriptを使用すると、実際に気になるオブジェクトのonclickイベントにリスナーを割り当てることができます。について）、そして私は実際にこれを使用することはありません。

于 2013-01-10T09:12:41.877 に答える