'Text-decoration: none' not working in Bootstrap

Question

On hover, my text links have underlines. This is the default in Bootstrap.

I want to keep this, unless the link is within a certain div.

The code I have tried (and several variations) doesn't work.

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

A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.

Dispraise

Related: https://mcmap.net/q/211108/-twitter-bootstrap-how-to-get-rid-of-underlined-button-text-when-hovering-over-a-btn-group-within-an-lt-a-gt-tag/923560 – Rorry

Answer 1

put the font-family in quotes for fonts that involve multiple words, first of all:

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

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

You have the order switched around. The item you're targeting should be to the right. For example,

.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"

Standpoint

Ah! It works. I misunderstood the logic a little. I thought because my a is wrapped around my DIVs in the HTML, that I have to target them in the order in which it was constructed i.e. to my mind, there was no a inside the div. – Dispraise

It isn't very clear what you mean when you say "then beneath..." and from there on. If you could write that out in clear code as an example, maybe it would make more sense. – Commendation

Answer 2

The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.

Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.

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

My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:

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

or this:

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

you should go ahead and remove the color and text-decoration rules.

That solved my problem.

Renwick

This answer is almost a year old, but I thought I would chime in. I would not recommend this method, as updates or changes to Bootstrap would likely result in you needing to change the code again. Instead, create a class that sets text-decoration: none; and add it to your HTML element. – Nauru

Answer 3

This won't work

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

but this will work.

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

because an a tag has text-decoration.

Eastlake

Answer 4

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

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

It works fine, even with boostrap used.

Hippomenes