Ссылки внутри больших кликабельных областей (только CSS)

Вот хорошая статья о создании ссылок внутри больших интерактивных областей:

http://css-tricks.com/links-inside-of-larger-clickable-areas/

Это решение требует JavaScript. В конце статьи есть неработающая ссылка на решение только для CSS (так что, очевидно, это можно сделать), но я не могу понять, как это можно сделать только с помощью CSS. Есть идеи?

Links inside larger clickable area

 Roddy of the Frozen Peas10 июл. 2012 г., 18:01
Так каждая из красных областей кликабельна? Как большая зеленая зона?
 Gareth10 июл. 2012 г., 18:59
@danielfaraday - я думаю, что нарезка является правильным решением здесь. Наличие смежных кликабельных областей без пропусков может привести к ошибочным ошибкам. Проблема стилей, которую вы упомянули, может быть решена, см. Мой ответ ниже
 David Jones10 июл. 2012 г., 18:02
Да, это правильно. Конечно, вы можете просто нарезать большую зеленую область на две половины так, чтобы они были отдельными, но сливались визуально, но затем, если вы хотите иметь эффект: hover для зеленой области, вам не повезло без JavaScript. ,

Ответы на вопрос(2)

Решение Вопроса

Мне не кажется слишком сложным (JSFiddle).

HTML:

<header>
    <a href="#1">Clickable</a>
    <nav>
        <ul>
            <li>
                <a href="#2">Clickable</a>
            </li>
            <li>
                <a href="#3">Clickable</a>
            </li>
            <li>
                <a href="#4">Clickable</a>
            </li>
            <li>
                <a href="#5">Clickable</a>
            </li>
        </ul>
    </nav>
</header>
​

CSS:

a { color: #f4ebd4; font-family: sans-serif; text-decoration: none; text-transform: uppercase; font-size: 0.8em; }

header { text-align: center; }

header > a { display: block;  line-height: 100px; }

header > a, header > a + nav { background: #4b885c; }
a:hover, a:hover + nav { background: blue; }

nav ul { display: table; width: 100%; }
nav li { display: table-cell; }
nav a { display: block; background: #a51d2c; padding: 10px 20px; margin: 10px; }
​
 31 янв. 2017 г., 15:46
@ Неон - потому что там нет<a>s, которые являются детьми других<a>в моей разметке. Обратите внимание, что в моем скрипте нижняя часть зеленой области не реагирует на нажатия - как я уже упоминал в комментарии выше, наличие кликабельных областей без промежутков между ними может сбивать с толку
 David Jones10 июл. 2012 г., 19:02
Вау, разметка тоже действительна! Ключ настройкиline-height: 100% на «внешнем» ссылка на сайт. Очень круто.
 David Jones10 июл. 2012 г., 19:07
Ах я вижу. Благодарю.
 10 июл. 2012 г., 19:05
ну, нет, это всего лишь один простой способ центрировать одну строку текста в его родительском блоке (например, он не будет работать с 2 строками текста). Если это все, что вас беспокоит, то этоdisplay: block в верхней ссылке, что важно - после этого вы можете делать то, что вы хотите, с помощью ссылки, чтобы изменить ее размер, как вы хотите
 09 сент. 2014 г., 09:32
@ DavidBall Я не вижу, как это возможно - нет перекрытия между активируемыми областями. Вы уверены, что у вас нет никаких Javascript или других осложнений?

http://jsfiddle.net/5MkVW/ Я быстро соединил это за последние 5 минут на работе, может быть, немного грязно, но попробуйте.

 David Jones10 июл. 2012 г., 18:44
Интересно. Я не понял, вложенный<a> теги будут работать. (Синтаксис, конечно, незаконен, но, похоже, работает). Я немного почистил твой JSFiddle:jsfiddle.net/7bP2T
 David Jones10 июл. 2012 г., 18:56
Обновлено с реальными ссылками:jsfiddle.net/XdtN2, Протестировано работает в IE9 (несмотря на неверный HTML).

Ваш ответ на вопрос