较大可点击区域内的链接（仅限 CSS）答案

【问题标题】：Links inside of larger clickable areas (CSS Only)较大可点击区域内的链接（仅限 CSS）
【发布时间】：2012-07-10 03:54:55
【问题描述】：

这是一篇关于在较大的可点击区域内创建链接的好文章：

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

此解决方案需要 JavaScript。在文章的最后，有一个指向纯 CSS 解决方案的断开链接（显然它可以完成），但我无法弄清楚如何仅使用 CSS 来完成。有什么想法吗？

【问题讨论】：

那么每个红色区域都是可点击的？大绿化区域也一样吗？
是的，没错。当然，你可以把大的绿色区域分成两半，这样它们是分开的，但在视觉上流动在一起，但是如果你想对绿色区域有一个 :hover 效果，那么如果没有 JavaScript，你就不走运了。 .
@danielfaraday - 我认为切片是正确的解决方案。相邻的可点击区域没有间隙会导致误点击。您提到的样式问题可以解决，请参阅下面的答案

标签： html css nested hyperlink

【解决方案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; }

【讨论】：

哇，标记也有效！关键是在“外部”链接上设置line-height: 100%。很酷。
嗯，不，这只是将一行文本置于其父块中的一种简单方法（例如，它不适用于 2 行文本）。如果这就是您所担心的，那么重要的是顶部链接上的display: block - 之后您可以使用链接做您想做的事情，以按照您的意愿调整大小
啊，注意是line-height: 100px，不是 100% - 这可能让你感到困惑。
@DavidBall 我看不出这怎么可能——可点击区域之间没有重叠。你确定你没有任何 Javascript 或其他并发症吗？
@Neon - 因为在我的标记中没有任何 <a>s 是其他 <a>s 的子代。请注意，在我的 Fiddle 中，绿色区域的底部是不可点击的——正如我在上面的评论中提到的那样，中间没有任何间隙的可点击区域可能会让 UX 感到困惑

【解决方案2】：

试试这个http://jsfiddle.net/5MkVW/我在工作的最后 5 分钟内快速将它放在一起，可能有点乱但试试看。

【讨论】：

有趣。我没有意识到嵌套的<a> 标签会起作用。（语法当然是非法的，但它似乎有效）。我稍微清理了你的 JSFiddle：jsfiddle.net/7bP2T
已更新真实链接：jsfiddle.net/XdtN2。在 IE9 中测试工作（尽管 HTML 无效）。