लिंक (सीएसएस केवल)

Question

यहां पर अधिक क्लिक करने योग्य क्षेत्रों के अंदर लिंक बनाने पर एक अच्छा लेख है:

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

यह समाधान JavaScript आवश्यक है। लेख के अंत में, एक सीएसएस-केवल समाधान के लिए एक टूटा हुआ लिंक है (इसलिए जाहिर है यह किया जा सकता है), लेकिन मैं यह नहीं समझ सकता कि यह केवल सीएसएस के साथ कैसे किया जाएगा। कोई विचार?

Answer 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> 
​ 

सीएसएस:

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; } 
​ 

Answer 2

इस http://jsfiddle.net/5MkVW/ कोशिश मैं जल्दी से काम पर पिछले 5 मिनट में एक साथ डाल दिया, थोड़ा गंदा हो सकता है लेकिन एक जाना है।