html – 较大可点击区域内的链接(仅限CSS)
发布时间:2020-12-14 16:36:30 所属栏目:资源 来源:网络整理
导读:这是一篇关于在较大的可点击区域内创建链接的好文章: http://css-tricks.com/links-inside-of-larger-clickable-areas/ 此解决方案需要JavaScript.在文章的最后,有一个断开的链接到一个只有CSS的解决方案(所以显然它可以完成),但我不知道如何只使用CSS.有任
这是一篇关于在较大的可点击区域内创建链接的好文章:
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; } ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |