thunderror
  • 0
Новичок

Не подчеркивать ссылки на изображения

  • 0

Одна моя панель виджетов, у меня есть изображение с гиперссылкой. Проблема в том, что 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 делает свое дело, но затем граница у всех виджетов снимается. Я использую Grid-focus с небольшой настройкой @ Thunderror.com

Share
  1. По определению это не изображение с гиперссылкой. Это тег гиперссылки, a который содержит тег изображения img . Скорее всего, это ссылка, которая действительно подчеркнута, изображение находится внутри нее.

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

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

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

    .textwidget a, .textwidget a:hover { border-bottom: none; }
    

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

    <a href="http://thunderror.com/" class="twitter-link">
    

    и стиль его.

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

    `<ul><li><a href="#"><img alt="" src="/images/your/image.jpg"> The text you want underlined on hover</a></li></ul>`
    

    В css вам нужно сделать img{display: block;} илиimg{float: left;}

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

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

    Рабочий пример можно увидеть в блоге The Book Depository. Найдите раздел «Блог издателя» внизу справа 🙂

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

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

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

    .commentlist .comment-author .twitter-link {
        border-bottom: none;
    }
    

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


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

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

    a { text-decoration: none; }
    

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

    .widgetname a { text-decoration: none; }
    

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

    • 0

Оставить ответ

You must login to add an answer.