Большие интерактивные области на веб-странице

Question

Извините, пока я отрезаюсь от реальности ... У меня есть сводный div, который содержит небольшой заголовок, немного текста, может быть, изображение. Я бы хотел, чтобы весь сводный div был ссылкой, примерно так:

<div class="summary">
  <a href="#">
    <h4>Small Heading</h4>
    <p>Small amount of text</p>
  </a>
</div>

Затем я бы придал стилю href, чтобы он выглядел как симпатичная коробка, поменяю H4 и P на: hover и т. Д. И т. Д. Но добавление href туда разозлит браузер.

Кто-нибудь может предложить способ достижения того же эффекта, не прибегая к Javascript? Это вообще возможно?

Большое спасибо!

Answer 1

Чистым решением CSS было бы сделать это:

<a href="#">
  <span class="header4">Small Heading</span>
  <span class="paragraph">Small amount of text</span>
</a>

Затем измените A на блочный элемент и стилируйте интервалы в соответствии с тем, как должны выглядеть заголовок и абзац:

<style>
a {
 display: block;
}

span.header4 {
 display: block;
 font-size: 24px;
 font-weight: bold;
 margin: 0 0 10px 0;
}

span.paragraph {
 display: block;
 margin: 0 0 10px 0;     
}
</style>

HTML / CSS purist не понравится, хотя!

Answer 2

Этот синтаксис - элементы уровня блока внутри ссылок - разрешен в HTML5. Это должно поддерживаться всеми браузерами (потому что люди, которые не знают лучше, всегда делали это).

Все, что вам нужно сделать, это изменить свой тип документа, а затем похвастаться перед друзьями, насколько вы современны: -)

Answer 3

Это будет делать то, что вы хотите, но вы потеряете возможность выделять (копировать + вставлять) текст, который находится под наложением ссылки. У вас также не будет контроля над псевдоклассом: hover в IE6 (поскольку IE6 и ниже не поддерживают его).

Вот HTML:

<div class="summary">
    <h4>Some Text</h4>
    <p>A short description</p>
    <a href="#" class="overlay">Anchor Text</a>
</div>

А вот и CSS:

<style>
div.summary {
 position: relative; 
 width: 200px; 
 height: 100px; 
 z-index: 10; 
}

div.summary h4 {
 position: relative;
 font-size: 18px;
 font-weight: bold; 
}

div.summary p {
 position: relative; 
}

a.overlay {
 display: block; 
 position: absolute; 
 text-indent: -9999px; 
 width: 200px; 
 height: 100px; 
 z-index: 30; 
 top: 0; 
 left: 0;
}
</style>

В качестве примечания убедитесь, что вы объявили позицию в элементе контейнера класса .overlay, чтобы сработало абсолютное позиционирование. Вам также необходимо убедиться, что вы объявляете позицию в родительском элементе каждого позиционированного элемента z-index.

Дайте мне знать, если у вас есть какие-либо проблемы.

Answer 4

Я, возможно, совсем не понимаю вашу цель.

Когда я скопировал ваш пример кода в текстовый редактор и открыл его в браузере (FF 3.5 на Leopard), он работал нормально. Я даже добавил немного стиля, чтобы быть уверенным.

Так это конкретный браузер, на котором он работает? Или это не подтверждается?

Вы пытались разместить тег привязки на внешней стороне div?

Answer 5

Краткий ответ: «Не с верным, стандартным, семантически правильным HTML». (HTML 5 пока не является стандартным и требует хаков, чтобы заставить его работать в различных браузерах)

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

Разумное количество пользователей просматривает ссылки в документах в поисках полезных. Пользователи программы чтения с экрана - хороший пример. Если текст ссылки огромен (как это было бы в вашем примере), это преимущество теряется.

Использование JavaScript является хорошим решением (но, естественно, только в том случае, если JS недоступен).

Я буду использовать jQuery для этого примера (он делает достаточно разные вещи с DOM, чтобы оправдать это).

<div class="summary">
    <h4><a href='#'>Small Heading</a></h4>
    <p>Small amount of text</p>
</div>

jQuery('div.summary').click(function () {
    jQuery('a', this).click();
});

Я не проверял это, но если click () не делает то, что я ожидаю, вы можете заменить его на:

jQuery('div.summary').click(function () {
    document.location = jQuery('a', this).attr('href');
});

Если JavaScript недоступен, заголовок по-прежнему является интерактивной ссылкой. Если это так, то можно щелкнуть всю область.

Вы можете добавить эффекты при наведении:

jQuery('div.summary').addClass('hoverable');

и

div.hoverable:hover { background-color: green; }

(Таким образом, эффект наведения не будет срабатывать, если JS недоступен, а CSS есть)

Answer 6

Расширяя сказанное Андреем:

    a.clickDiv {
       display:block;

    }


    <a href="somelink.html" class="clickDiv">

    content

    </a>

Answer 7

Попробуйте изменить стиль элемента a на display:block.

Answer 8

Почему бы не использовать JavaScript?

<div class="summary" onclick="window.location.href='www.google.com';>
  <h4>Small Heading</h4>
  <p>Small amount of text</p>
</div>

Без JavaScript вы не получите всю область div, активируемую кликом. Только текст.