Хобрук: Ваш путь к мастерству в программировании

Только текст в поле ссылки кликабельный

На веб-странице у меня есть список миниатюр с полями ссылок поверх них. Они обернуты тегом ссылки и кликабельны. Однако в полях ссылок поверх них, которые имеют слегка прозрачный фон, кликать можно только по тексту, а не по всему полю.

Это HTML-код для одного набора миниатюр и ссылок:

<article class="recent-post-item">
    <h2>
        <a  href="link/to/somewhere" title="Permanent link to Something">Something</a>
    </h2>
    <a href="link/to/somewhere" title="Something" class="thumb">
        <img src="someimage.png" alt="Something" width="248" height="125" />
    </a>
</article>

И это соответствующая таблица стилей:

#column-2 .recent-post-item {
    height: 127px;
    width: 250px;
    position: relative;
    border: none;
}
#column-2 .thumb {
    margin: 0;
    position: absolute;
    top: 0px;
    left: 0px;
}
#column-2 h2 {
    font-size: 22px;
    background-color:rgba(255,255,255,0.6);
    padding: 5px 4px;
    margin: 0;
    position: absolute;
    z-index: 1;
    bottom: 1px;
    left: 1px;
    right: 1px;
}

А вот рабочий сайт, показывающий проблему: http://fuckthepony.dk/wordpress/ (миниатюры я я говорю о тех, кто в средней колонке)

Некоторые люди сказали мне, что они не испытывают проблемы. Я тестировал Linux с Opera, Chrome и Firefox, и проблема сохраняется во всех этих браузерах.

html css hyperlink
24.05.2012

Ответы:


1

Я согласен с комментариями выше, но чтобы сделать весь прозрачный блок кликабельным, вам нужно также снять отступы с h2 и вместо этого добавить отступы к тегу a.

#column-2 h2 {
    padding: 0;
}

#column-2 h2 a {
    display: block;
    padding: 5px 4px;
}
24.05.2012
  • Смешной. Я мог бы поклясться, что уже добавил тег блока отображения в файл a. Ваше решение работает отлично. Очень мило! 24.05.2012

    • 2

    Это связано с тем, что элементы a являются встроенными элементами, поэтому они не занимают всю доступную ширину родителя. Вы можете добавить это правило в свой css:

    #column-2 h2 a {
    display: block;
}
    24.05.2012

    3

    Это просто потому, что элемент a не имеет display:block по умолчанию.

    Просто добавьте эту небольшую строку:

    #column-2 h2 a { display:block; }
    24.05.2012
    Новые материалы
    Решения DBA Metrix
    DBA Metrix Solutions предоставляет удаленного администратора базы данных (DBA), который несет ответственность за внедрение, обслуживание, настройку, восстановление базы данных, а также другие..
    Начало работы с Блум
    Обзор и Codelab для генерации текста с помощью Bloom Оглавление Что такое Блум? Некоторые предостережения Настройка среды Скачивание предварительно обученного токенизатора и модели..
    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...