Bağlantılar (CSS Only)

İşte büyük tıklanabilir alanlar içindeki bağlantıları oluşturma konusunda iyi bir makale:Bağlantılar (CSS Only)

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

Bu çözüm JavaScript gereklidir. Makalenin sonunda, CSS'ye özel bir çözümün bozuk bir bağlantısı var (yani görünüşe göre yapılabilir), ancak bunun yalnızca CSS ile nasıl yapılacağını anlayamıyorum. Herhangi bir fikir?

Links inside larger clickable area

kaynak

2012-07-10 David Jones

Yani kırmızı alanların her tıklanabilirdir? Büyük yeşil alan olduğu gibi? –

Evet, doğru. Tabii ki, büyük yeşil alanı iki yarıya bölebilirsiniz, böylece birbirlerinden ayrıdırlar, ancak görsel olarak birlikte akabilirlerdi, ancak eğer bir yeşil alanın üzerine gelmek isterseniz: JavaScript olmadan şansınız kalmaz. –

@danielfaraday - Dilimlemenin doğru çözüm olduğunu düşünüyorum. Aralıksız bitişik tıklanabilir alanlara sahip olmak, kafa karıştırıcı karışıklıklara yol açabilir. Bahsettiğiniz stil sorunu etrafta olabilir, cevabımı – Gareth

Bana göre zor gelmiyor (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; }

kaynak

2012-07-10 16:55:22 Gareth

Vay, işaretleme de geçerli! Anahtar, 'dış' bağlantısında 'satır yüksekliğini:% 100 'olarak ayarlıyor. Çok havalı. –

hayır hayır, bu, bir satırlık metni üst satırında ortalamak için basit bir yoldur (örneğin 2 satır metinle çalışmaz). Eğer endişe duyuyorsanız, o zaman önemli olan üst bağlantıdaki 'display: block' - bundan sonra istediğiniz bağlantıyı istediğiniz gibi yapabilirsiniz – Gareth

Ah, nasıl görüyorsunuz? Teşekkürler. –

biraz dağınık olabilir, çabuk iş yerinde son 5 dakika içinde bir araya getirdiler bu http://jsfiddle.net/5MkVW/ çalışıyorum ama gidebilirsiniz.

kaynak

2012-07-10 16:32:12

İlginç kısmına bakın. İç içe geçmiş '' etiketlerinin işe yaradığını fark etmemiştim. (Sözdizimi elbette yasadışı, ama işe yarıyor gibi görünüyor). JSFiddle'ı biraz temizledim: http://jsfiddle.net/7bP2T/ –

Gerçek bağlantılar ile güncellendi: http://jsfiddle.net/XdtN2/. IE9'da test edildi (geçersiz HTML'ye rağmen). –

Bağlantılar (CSS Only)

cevap

İlgili konular