html - より大きなクリック可能な領域内のリンク（CSSのみ）

Question

クリック可能な大きな領域内にリンクを作成するための優れた記事は次のとおりです。

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

このソリューションにはJavaScriptが必要です。記事の最後に、CSSのみのソリューションへの壊れたリンクがあります（明らかにそれは可能です）が、CSSのみでこれがどのように行われるのか理解できません。何か案は？

Answer 1

私にはそれほど難しいことではないようです（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; }
​

Answer 2

これを試してみてくださいhttp://jsfiddle.net/5MkVW/仕事で最後の5分間にすばやくまとめました。少し面倒かもしれませんが、試してみてください。