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; }
试试这个http://jsfiddle.net/5MkVW/我在工作的最后5分钟快速把它放在一起,可能有点凌乱但是有一个去。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.