Home/ Questions/Q 13464
Next
Answered
thunderror
  • 0
Новичок
Asked: 2022-03-17T06:07:29+03:00 In:

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

  • 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

cssimageslinks
Share

    9 ответов

    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.

    Need An Account,