较大的可点击区域内的链接（仅限CSS） [英] Links inside of larger clickable areas (CSS Only)

问题描述

以下是有关在可点击区域内创建链接的好文章：

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

此解决方案需要JavaScript。在文章的结尾，有一个断开的链接到一个纯CSS解决方案（所以显然可以做到），但我不知道如何这将与CSS完成。任何想法？

解决方案

对我来说似乎太难了（

 
 code>< header> 
< a href =＃1>可点击< / a> 
< nav> 
< ul> 
< li> 
< a href =＃2>可点击< / a> 
< / li> 
< li> 
< a href =＃3>可点击< / a> 
< / li> 
< li> 
< a href =＃4>可点击< / a> 
< / li> 
< li> 
< a href =＃5>可点击< / 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;宽度：100％; } 
 nav li {display：table-cell; } 
 nav a {display：block;背景：＃a51d2c; padding：10px 20px; margin：10px; } 
 
  

Here's a good article on creating links inside of larger clickable areas:

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

This solution requires JavaScript. At the end of the article, there's a broken link to a CSS-only solution (so apparently it can be done), but I can't figure out how this would be done with CSS only. Any ideas?

解决方案

Doesn't seem too difficult to me (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; }
​

这篇关于较大的可点击区域内的链接（仅限CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！