html – 较大可点击区域内的链接(仅限CSS)

概述这是一篇关于在较大的可点击区域内创建链接的好文章： http://css-tricks.com/links-inside-of-larger-clickable-areas/ 此解决方案需要JavaScript.在文章的最后,有一个断开的链接到一个只有CSS的解决方案(所以显然它可以完成),但我不知道如何只使用CSS.有任何想法吗？ 对我来说似乎不太难( JSFiddle). HTML： <hea 这是一篇关于在较大的可点击区域内创建链接的好文章：

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

此解决方案需要JavaScript.在文章的最后,有一个断开的链接到一个只有CSS的解决方案(所以显然它可以完成),但我不知道如何只使用CSS.有任何想法吗？

解决方法 对我来说似乎不太难( 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; }​

总结

以上是内存溢出为你收集整理的html – 较大可点击区域内的链接(仅限CSS)全部内容，希望文章能够帮你解决html – 较大可点击区域内的链接(仅限CSS)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。