display:none;で非表示になった内容の一部を表示したい

  • 解決済 bobchoko

    (@bobchoko)


    10年、 6ヶ月前

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

    以下のようなコード

    HTML

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

    css

    .abc{
    display:none;
    }

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

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

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

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

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • builder0xx

    (@builder0xx)

    10年、 6ヶ月前

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

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

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

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

    nobita

    (@nobita)

    10年、 6ヶ月前

    こんにちは

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

    div class="abc">
  エービーシー
  <div class="ghi">
    ジーエイチアイ
  </div>
</div>
    <style type="text/css">
.abc{visibility:hidden;}
.ghi{visibility:visible;}
</style>
    トピック投稿者 bobchoko

    (@bobchoko)

    10年、 6ヶ月前

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

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

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

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