'Text-Dekoration: keine' funktioniert nicht im Bootstrap

Question

Bei Hover haben meine Textlinks Unterstreichungen. Dies ist der Standard in Bootstrap.

Ich möchte dies beibehalten, es sei denn, der Link ist innerhalb eines bestimmten div.

Der Code, den ich versucht habe (und verschiedene Varianten), funktioniert nicht.

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

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

Eine kurze Anmerkung: Ich habe a {text-decoration: none;} getestet, dies funktioniert. Ich möchte jedoch nicht alles ändern. Nur die Links in diesem speziellen Fall.

Answer 1

legte die font-family in Anführungszeichen für Schriften, die mehrere Wörter beinhalten, zunächst einmal:

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

dann unter a.wall-entry a:hover { text-decoration: none; } setzen

Sie haben die Reihenfolge vertauscht. Der Artikel, auf den Sie ausgerichtet sind, sollte auf der rechten Seite sein. Zum Beispiel

.wrapper .header a in Englisch bedeutet „Ziel alle Verbindungen Anker, der innerhalb von .header sind, die innerhalb von .wrapper sind“

Answer 2

Dies funktioniert nicht

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

aber dies funktionieren wird .

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

weil ein a Tag hat text-decoration.

Answer 3

Das Problem ist eigentlich eine von Twitter Bootstrap CSS-Datei verursacht, nicht Ihren Code.

Twitter Bootstrap CSS-Datei (bootstrap.min.css war der Übeltäter in meinem Projekt) gibt Links unterstrichen mehrere Male. Es gibt ihnen eine Unterstreichung, wenn sie sich über ihnen befinden, wenn sie konzentriert sind, und sie werden sogar blau.

In meinem Projekt habe ich dem Text, der innerhalb von Anchor-Tags war, speziell meine eigenen Farben zugewiesen, und der Browser hat seine Farben korrekt wiedergegeben, genauso wie ich sie zugewiesen habe, da der Text in ein Anchor-Tag gewickelt wurde blaue Unterstreichung vom Twitter-Bootstrap-Stylesheet erschien immer noch unter meinem ganzen formatierten Text.

Meine Lösung: Öffnen Sie bootstrap.min.css (oder was auch immer Ihr Bootstrap-Stylesheet genannt wird) und suchen Sie nach dem Ausdruck 'unterstreichen', und immer wenn Sie 'text-decoration: unterstreichen' in einem Anker-Tag-Selektor finden :

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

oder dies:

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

sollten Sie voran gehen und die Farbe und Text-Dekoration Regeln entfernen.

Das löste mein Problem.

Answer 4

Wenn noch jemand kümmert, habe ich es auf diese Weise, und es funktionierte für mich:

a:hover, 
.a:hover { 
    text-decoration: none !important; 
} 

Answer 5

Wenn Ihr Link in div-Tags ist, dann können Sie Ihren Link auf diese Weise wählen:

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

Es funktioniert gut, auch mit Boostrap verwendet.