'Text-decoration: none' не работает в Bootstrap

при наведении курсора мои текстовые ссылки имеют подчеркивания. Это по умолчанию в Bootstrap.

Я хочу сохранить это, если только ссылка не находится в определенном div.

код, который я пробовал (и несколько вариантов), не работает.

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>

мой 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 {text-decoration: none;}, это работает. Однако я не хочу все менять. Только ссылки в данном конкретном случае.

6
css html text-decorations twitter-bootstrap

5 ответов

поместите семейство шрифтов в кавычки для шрифтов, которые включают несколько слов, прежде всего:

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

потом под a put .wall-entry a:hover { text-decoration: none; }

вы поменяли порядок. Товар вы нацелились должна быть справа. Например,

.wrapper .header a на английском языке означает " Target все якорные ссылки, которые находятся внутри .заголовок, который находится внутри .обертка"

8

проблема на самом деле вызвана CSS-файлом Twitter Bootstrap, а не вашим кодом.

CSS-файл Twitter Bootstrap (bootstrap.минута.CSS был виновником моего проекта) дает ссылки подчеркивает несколько раз. Это дает им подчеркивание, когда они нависают, когда они сосредоточены, и даже делает их синими.

в моем проекте я специально назначил свои собственные цвета тексту, который был внутри тегов привязки, и браузер правильно отобразил их цвета, просто однако, когда я назначил их, поскольку текст был завернут в якорный тег, синее подчеркивание из таблицы стилей Bootstrap Twitter все еще появлялось под всем моим стилизованным текстом.

мое решение: откройте bootstrap.минута.css (или как называется ваша таблица стилей Bootstrap) и поиск термина "подчеркивание", и всякий раз, когда вы находите "text-decoration: underline" внутри селектора тегов привязки, например:

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

или такой:

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

вы должны идти вперед и удалить правила оформления цвета и текста.

это решило мою проблему.

2

это не сработает

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

но это будет работать.

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

, потому что a тега text-decoration.

0

Если ваша ссылка находится внутри тегов div, вы можете выбрать свою ссылку следующим образом:

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

Он отлично работает, даже с boostrap.

0

Если все еще кто-то заботится, я сделал это так, и это сработало для меня:

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