"Текстовое оформление: нет" не работает в 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;}это работает. Однако я не хочу все менять. Просто ссылки в данном конкретном случае.

Источник

5 ответов

Решение

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

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

затем под a положил .wall-entry a:hover { text-decoration: none; }

Вы изменили порядок. Объект, на который вы нацеливаетесь, должен быть справа. Например,

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

Источник

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

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

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

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

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

или это:

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

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

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

Источник

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

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,

Источник

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

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

Работает нормально, даже с бустрапом.

Источник

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

a:hover, 
.a:hover {
   text-decoration: none !important;
}
Источник
Другие вопросы по тегам