link all'interno di aree cliccabili più grandi (CSS solo)

Ecco un buon articolo sulla creazione di legami all'interno delle aree cliccabili più grandi:link all'interno di aree cliccabili più grandi (CSS solo)

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

Questa soluzione richiede JavaScript. Alla fine dell'articolo, c'è un collegamento interrotto a una soluzione solo CSS (quindi apparentemente può essere fatto), ma non riesco a capire come questo sarebbe fatto solo con i CSS. Qualche idea?

Links inside larger clickable area

fonte

2012-07-10 David Jones

Così ciascuna delle zone rosse sono cliccabili? Come è la grande area verde? –

Sì, è vero. Naturalmente, puoi dividere la grande area verde in due metà in modo che siano separate ma scorrano insieme visivamente, ma se vuoi avere un effetto hover nell'area verde, sei senza fortuna senza JavaScript. –

@danielfaraday - Penso che l'affettatura sia la soluzione giusta qui. Avere aree adiacenti cliccabili senza spazi vuoti può portare a confusione errata. Il problema di stile che hai menzionato può essere risolto, vedi la mia risposta sotto – Gareth

Non sembra troppo difficile per 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; }

fonte

2012-07-10 16:55:22 Gareth

Wow, anche il markup è valido! La chiave sta impostando 'line-height: 100%' sul link 'outer'. Molto bello –

beh no, questo è solo un modo semplice per centrare una riga di testo nel suo blocco principale (non funzionerebbe con 2 righe di testo, ad esempio). Se questo è tutto ciò che ti preoccupa, allora è il 'display: block' sul link in alto che è importante - dopo di che puoi fare quello che vuoi con il link per ridimensionarlo come vuoi – Gareth

Ah, capisco. Grazie. –

provare questo http://jsfiddle.net/5MkVW/ ho subito messo insieme negli ultimi 5 minuti sul posto di lavoro, potrebbe essere un po 'disordinato, ma avere un andare.

fonte

2012-07-10 16:32:12

Interessante. Non avevo realizzato che i tag '' nidificati funzionassero. (La sintassi è illegale, ovviamente, ma sembra funzionare). Ho ripulito un po 'il tuo JSFiddle: http://jsfiddle.net/7bP2T/ –

Aggiornato con collegamenti reali: http://jsfiddle.net/XdtN2/. Testato lavorando in IE9 (nonostante l'HTML non valido). –

link all'interno di aree cliccabili più grandi (CSS solo)

risposta

Problemi correlati