web-dev-qa-db-fra.com

Masquer le nœud de texte dans l'élément, mais pas les enfants

J'ai un petit problème avec CSS et je n'arrive pas à trouver de solution. J'ai ce HTML

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

Maintenant, je veux masquer le texte "Cliquez pour fermer" uniquement, sans cacher ni le div, ni le lien qu'il contient.

Cela peut-il être fait?

csstextnode
55
elveti

L'attribut visibility peut être remplacé sur les éléments enfants, vous pouvez donc le faire:

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

CSS:

#closelink {
    visibility:collapse;
}

#closelink a{
    visibility:visible;
}

Et le résultat est le suivant: http://jsfiddle.net/pavloschris/Vva84/

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

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

Essayer

<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

Cela fonctionne mais vous pouvez utiliser visibility:hidden au lieu de visibility:collapse

4
mamath

Pour éviter que l'élément enfant ne se casse sur une nouvelle ligne (comme cela se produit avec la seule utilisation de visibilité: caché/réduit; et de visibilité: visible), et pour éviter de dessiner un bloc 9999px dans le navigateur (généralement mal vu car il ne s'agit pas d'un surcoût inutile), essayez cette:

<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;
}

Vous pouvez ajuster votre left: 0 valeur pour fournir un remplissage.

3
Robert Henderson

Il y a trois méthodes auxquelles je pourrais penser:

Un

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

Deux

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

Trois

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

L'opacité est préférable si vous voulez que l'image soit toujours sur la page pour conserver la structure, mais vous ne voulez pas qu'elle soit visible. J'espère que cela vous a été utile.

0
Orane Findley