"Text-decoration: none" ne travaillent pas dans le Bootstrap

Sur le vol stationnaire, mon texte, des liens ont souligne. C'est la valeur par défaut dans le Bootstrap.

Je veux garder cette, à moins que le lien est dans un certain div.

Le code que j'ai essayé (et plusieurs variantes) ne fonctionne pas.

Le code HTML:

        <div class="wall-entry span5">
            <a href="">
            <img src="http://www.placehold.it/290x163" />
            <div class="wall-address">
                <p>Burgundy Street</p>
                <p>New Orleans, LA</p>
                <p>USA</p>
            </div>
            </a>
        </div>

Mon CSS:

.wall-entry     {
                background-color: @black;
                position: relative;

            img {
                opacity:0.4;
                filter:alpha(opacity=40); /* For IE8 and earlier */
                }

            div {
                position: absolute;
                left: 10px;
                bottom: 10px;
                p   {
                    line-height: 18px;
                    margin: 0;
                    font-family: Neuzit Heavy;
                    font-size: 18px;
                    color: white;
                    text-decoration: none;
                    }
                }
            }


div.wall-entry:hover img    {
                            opacity:1;
                            filter:alpha(opacity=100); /* For IE8 and earlier */                    
                            }

a div.wall-entry {text-decoration: none;}

Une petite note: j'ai testé a {text-decoration: none;}, cela ne fonctionne pas. Cependant, je ne veux pas tout changer. Seulement les liens dans ce cas précis.

InformationsquelleAutor Olly F | 2012-04-30
  1. 8

    mettre à la police-famille dans les devis pour les polices qui impliquent plusieurs mots, tout d'abord:

    font-family: "Neuzit Heavy", sans-serif;

    puis sous a mettre .wall-entry a:hover { text-decoration: none; }

    Vous avez l'ordre de commutation autour de. L'élément que vous ciblez doit être à la droite. Par exemple,

    .wrapper .header a en anglais signifie "Cible tous les liens d'ancrage qui sont à l'intérieur de .l'en-tête, qui sont à l'intérieur de .wrapper"

    • Ah! Elle fonctionne. J'ai mal compris la logique un peu. J'ai pensé parce que mon a est enroulé autour de mes DIVs dans le code HTML, que j'ai de la cible dans l'ordre dans lequel il a été construit, c'est à dire à mon esprit, il n'y a pas de a à l'intérieur de la div.
    • Il n'est pas très clair ce que vous voulez dire quand vous dites "puis sous..." et à partir de là. Si vous pourriez écrire dans un code clair, comme un exemple, peut-être qu'il aurait plus de sens.
    InformationsquelleAutor Tallboy
  2. 2

    Le problème est en fait causé par Twitter Bootstrap CSS du fichier, pas votre code.

    Twitter Bootstrap du fichier CSS (bootstrap.min.css était le coupable sur mon projet) donne des liens souligne à plusieurs reprises. Il leur donne un trait de soulignement quand ils sont planait au-dessus, quand ils se concentrent sur, et il fait même les bleu.

    Dans mon projet, j'ai particulièrement affecté mes propres couleurs pour le texte qui était à l'intérieur de balises d'ancrage, et le navigateur rendu leurs couleurs correctement, juste que je me suis assigné, cependant, puisque le texte a été enveloppé dans une balise d'ancrage, le bleu souligné dans le Twitter Bootstrap de la feuille de style semblent encore en dessous de tout mon style de texte.

    Ma solution: ouvrir bootstrap.min.css (ou quel que soit votre Bootstrap de la feuille de style est appelé) et pour la recherche du terme 'souligné', et à chaque fois que vous trouvez "text-decoration: underline" à l'intérieur d'une balise d'ancrage sélecteur, comme ceci:

    a:hover, a:focus {
  color: #2a6496;
  text-decoration: underline;
}

    ou ceci:

          a, a:visited {
    text-decoration: underline;
  }

    vous devriez aller de l'avant et de retirer la couleur de texte et de la décoration de règles.

    Qui a résolu mon problème.

    • Cette réponse a presque un an, mais j'ai pensé que je voudrais mentionner. Je ne recommande pas cette méthode, car les mises à jour ou des changements de Bootstrap entraînerait probablement que vous avez besoin de changer à nouveau le code. Au lieu de cela, créez une classe qui définit text-decoration: none; et l'ajouter à votre élément HTML.
    InformationsquelleAutor Cameron Newland
  3. 0

    Cela ne fonctionne pas

    a div.wall-entry {text-decoration: none;} //Inside 'a' div with class wall-entry

    mais cela fonctionne.

    div.wall-entry a{text-decoration: none;} //Inside div with class wall-entry 'a'

    car un a tag a text-decoration.

    InformationsquelleAutor The Alpha
  4. 0

    Si votre lien est à l'intérieur des balises div, alors vous pouvez choisir votre lien de cette façon:

    div > a:hover {
  text-decoration:none;
}

    Il fonctionne très bien, même avec bootstrap utilisé.

    InformationsquelleAutor Genia