"Text-decoration: none" does not work in Bootstrap

Question

On hover, my text links are underlined. This is the default value in Bootstrap.

I want to keep this if the link is not within a specific div.

The code I tried (and several options) does not work.

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> 

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

Quick note: I tested a {text-decoration: none;} , it really works. However, I do not want to change everything. Just links in this particular case.

Answer 1

put the font family in quotation marks for fonts that include multiple words in the first place:

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

then under a put .wall-entry a:hover { text-decoration: none; } .wall-entry a:hover { text-decoration: none; }

You have an order. The element you are aiming at should be on the right. For instance,

.wrapper .header a in English means "Target all anchor links inside .header that are inside .wrapper"

Answer 2

The problem is actually caused by the Twitter Bootstrap CSS file, not your code.

Twitter Twitter The Bootstrap CSS file (bootstrap.min.css was the culprit of my project) underlines links several times. This gives them emphasis when they hang, when they are focused, and even makes them blue.

In my project, I specifically assigned my own colors to the text that was inside the anchor tags, and the browser displayed their colors correctly, as I assigned them, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my stylized text.

My solution: open bootstrap.min.css (or something you call Bootstrap style) and search for the term “underline” and whenever you find “text-decoration: underline” inside the anchor tag selector, for example:

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

or that:

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

you must go ahead and remove the rules for color and text.

This solved my problem.

Answer 3

This will not work

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

but it will work.

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

since the a tag has text-decoration .

Answer 4

If someone cares, I did it like this and it worked for me:

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

Answer 5

If your link is inside div tags, you can select your link this way:

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

It works great even when using a channel.