Скрыть текст node в элементе, но не в дочерних

У меня небольшие проблемы с CSS, и я не могу найти решение. У меня этот HTML

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

Теперь я хочу скрыть только текст "Нажмите, чтобы закрыть", не скрывая ни div, ни ссылку внутри него.

Можно ли это сделать?

Ответ 1

Атрибут 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/

Ответ 2

.closelink {
  font-size: 0px;
}

.close-link a {
  font-size: 12px;
}

Ответ 3

Try

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


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

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

Ответ 4

Он работает, но вы можете использовать visibility:hidden вместо visibility:collapse

Ответ 5

Чтобы дочерний элемент не разбился на новую строку (как это происходит при использовании видимости: скрытый/сбой и видимость: видимый), а также избегать рисования блока 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, чтобы обеспечить некоторое заполнение.

Ответ 6

Есть три метода, о которых я мог подумать:

Один

  <!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>

Непрозрачность лучше всего, если вы хотите, чтобы изображение всегда находилось на странице, чтобы сохранить структуру, но вы не хотите, чтобы она была видимой. Надеюсь, это было полезно.