Css - Прекратить Подчеркивание Ссылок На Изображения

На одной панели виджетов у меня есть изображение, на которое есть гиперссылка. Проблема в том, что CSS это подчеркивает. Как убрать подчеркивание?

Обновлять:

 }
.entry a,
.secondaryColumn a,
#commentsContainer h3 a,
.commentlist .comment-author a {

border-bottom: 1px solid #ddd;

color: #3c6c92;

font-weight: bold;
}
.entry a:hover,
.secondaryColumn a:hover,
#commentsContainer h3 a:hover,
.commentlist .comment-author a:hover,
.commentlist .comment-meta a:hover {

color: #3c6c92;

border-bottom: 1px solid #3c6c92;
}
 

Только что заметил, что именно это вызывает подчеркивание:

изменение border-bottom на 0px помогает, но затем граница у всех виджетов исчезает.

По определению, это не изображение с гиперссылкой. Это тег гиперссылки

 
 
 
 
 
 .widgetname a { text-decoration: none; }
 
 
 
 
 
 

Вам необходимо создать новое правило CSS, которое сопоставляет вашу ссылку с изображением и не указывает подчеркивания (кстати, это также может быть свойство border-bottom, некоторые рекомендуют использовать его вместо подчеркивания для лучшего вида типографики).

Если можно, дайте ссылку на сайт. Теоретически CSS даже хуже, чем теоретически PHP. :)

Я полагаю, речь идет об изображении в Твиттере вверху боковой панели? Попробуйте это:

Но это повлияет на все текстовые виджеты. Вероятно, лучше назначить отдельный класс для ссылки, например

и стилизуйте его.

У меня есть рабочее решение этой проблемы.

В CSS вам нужно сделать `<ul><li><a href="#"><img alt="" src="/images/your/image.jpg"> The text you want underlined on hover</a></li></ul>` or <a href="http://thunderror.com/" class="twitter-link">

Конечно, вам решать, какой вариант выбрать исходя из ваших потребностей.

Я надеюсь, что это поможет решить проблему вам (хотя и год спустя) и всем, кто столкнулся с такой же проблемой.

Рабочий пример можно увидеть по адресу Блог Книгохранилища. Найдите раздел «Блог издателей» внизу справа :)

Изменить: чтобы ответить на ваш пересмотренный и расширенный вопрос:

Вы столкнулись с замечательной вещью, называемой специфичностью CSS. Я позволю вам погуглить кровавые подробности, но, по сути, «.commentlist .comment-author a» переворачивает больше деталей, чем «.twitter-link».

Если вы хотите переопределить стиль, вам нужно сделать это следующим образом:

(Я примерно на 99% уверен, что имя класса (.twitter-link) более конкретное, чем имя элемента (a). Если приведенное выше не работает, возможно, вам придется добавить класс типа «twitter-widget». в виджет, а затем переопределить его с помощью ".commentlist .comment-author .twitter-widget a { ...")

Старый ответ, который все еще может отвечать на более общие вопросы:

Что ж, если вы хотите включить подчеркивание ссылок глобально, вы можете добавить следующий бит CSS в style.css:

Если вы хотите отключить подчеркивание только для этой ссылки, вы можете сделать:

Где .widgetname — это значение атрибута class контейнера виджетов.