web-dev-qa-db-ja.com

要素内のテキストノードを非表示にしますが、子は非表示にしません

CSSに少し問題があり、解決策が見つからないようです。このHTMLがあります

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

ここで、divもその中のリンクも非表示にせずに、"クリックして閉じる"のみを非表示にします。

これはできますか？

csstextnode
55
elveti

visibility属性は子要素でオーバーライドできるため、これを行うことができます。

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

CSS：

#closelink {
    visibility:collapse;
}

#closelink a{
    visibility:visible;
}

結果は次のとおりです。 http://jsfiddle.net/pavloschris/Vva84/

77
xpy
.closelink {
  font-size: 0px;
}

.close-link a {
  font-size: 12px;
}
16
Thịnh Phạm

試してみる

<div id="closelink">
   <a href="">Close</a>
   Click to close
</div>


#closelink {
    position: relative;
    left: -9999px;
}

#closelink a {
    position: relative;
    left: 9999px;
}
4
Dipesh Parmar

動作しますが、visibility:hiddenの代わりにvisibility:collapseを使用できます

4
mamath

子要素が新しい行に分割されないように（visibility：hidden/collapse;およびvisibility：visibleを使用した場合に発生する）、ブラウザーで9999pxブロックを描画しないようにします（一般的に、不要なオーバーヘッドのために眉をひそめます）この：

<div id="closelink">
    <a href="">Close</a>
    Click to close
</div>


#closelink {
    position: relative;
    visibility: hidden;
}

#closelink a {
    position: absolute;
    left: 0;
    top: 0;
    visibility: visible;
}

left: 0いくつかのパディングを提供する値。

3
Robert Henderson

私が考えることができる3つの方法があります：

1

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <style type="text/css">

        #parent{
            opacity: 1;
        }
        .child{
            opacity: 0;
        }
        </style>
      </head>
      <body>

        <div id="parent">
                dkjfdkf
            <span class="child">Annoying text</span>
        </div>

      </body>
    </html>

二

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <style type="text/css">

        #parent{

        }
        .child{
            visibility: hidden;
        }
        </style>
      </head>
      <body>

        <div id="parent">
                dkjfdkf
            <span class="child">Annoying text</span>
        </div>

      </body>
    </html>

三

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <style type="text/css">

        #parent{

        }
        .child{
            display: none;
        }
        </style>
      </head>
      <body>

        <div id="parent">
                dkjfdkf
            <span class="child">Annoying text</span>
        </div>

      </body>
    </html>

構造を維持するために画像を常にページ上に配置したいが、表示したくない場合は、不透明度が最適です。これがお役に立てば幸いです。

0
Orane Findley