サポート » 使い方全般 » display:none;で非表示になった内容の一部を表示したい

  • 解決済 bobchoko

    (@bobchoko)


    こちらで質問することは間違っているかもしれませんが、
    自分なりに調べましてもわかりませんでしたので、
    ご質問させてください。

    以下のようなコード

    HTML

    <div class=”abc”>
    エービーシー
    <div class=”ghi”>
    ジーエイチアイ
    </div>
    </div>

    css

    .abc{
    display:none;
    }

    上のようなコードがあった場合、
    「エービーシー」も「ジーエイチアイ」も
    両方ともdisplay:none;によって非表示となります。

    この状況で、「エービーシー」だけ消去して、
    「ジーエイチアイ」を表示するようにしたいです。

    どのようにすればよいでしょうか?

    よろしくお願い致します。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • <div class="abc">
      エービーシー
      <div class="ghi">
        ジーエイチアイ
      </div>
    </div>

    この構造だと、”div.abc”の中に”div.ghi”が入れ子で入ってしまっているので、”div.abc”を非表示にしてしまうと、”div.ghi”はおのずと表示されなくなります。

    どうしてもというのなら、以下のように構造を変えるしかないのではないでしょうか?

    <div class="abc">
      エービーシー
    </div>
    <div class="ghi">
      ジーエイチアイ
    </div>

    こんにちは

    以下のようにする方法があります。

    div class="abc">
      エービーシー
      <div class="ghi">
        ジーエイチアイ
      </div>
    </div>
    <style type="text/css">
    .abc{visibility:hidden;}
    .ghi{visibility:visible;}
    </style>

    お二方、ご返信ありがとうございました。

    nobitaさんの方法で出来ました。
    大変助かりました。

    ありがとうございました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「display:none;で非表示になった内容の一部を表示したい」には新たに返信することはできません。