リンク内部リンク

Question

このようなコードがあれば、どうすれば.layerまたは.layer-infoにリンクできますか？私はJavaScriptなしでソリューションを好むが、私はあらゆる種類のソリューションに満足している。例作業

<div class="layer"> 
    <img src="http://besttours.com/media/catalog/category/NYC_2-compressor.jpg" alt=""> 
    <div class="layer-info"> 
    <h5>NYC</h5> 
    <p class="small">USA</p> 
    <ul class="absolute-bottom"> 
     <li><a href="">Hotels</a></li> 
     <li><a href="">What to do</a></li> 
     <li><a href="">Tickets</a></li> 
    </ul> 
    </div> 
</div> 

はここにある：http://codepen.io/anon/pen/VaEPdy

Answer 1

あなたはそれを達成するためにposition INGを使用することができます。副作用もあります。すでに相対的なレイヤー内にが追加されています（<a>）。

この方法では、いくつかあります：

• あなたがクリック可能なリンクで全体の層を持っています。
• 内部リンク、テキストリンクは引き続き機能します。
• JavaScriptがありません。
• リンクの種類がリンク内にあります。
• 意味的に有効です。

img { 
 
    width: 100%; 
 
} 
 
.layer { 
 
    position: relative; 
 
} 
 
.layer-info { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.biglink { 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    display: block; 
 
    z-index: 999; 
 
} 
 
.absolute-bottom a { 
 
    position: relative; 
 
    z-index: 1000; 
 
}

<div class="layer"> 
 
    <a href="http://google.com" class="biglink"></a> 
 
    <img src="http://besttours.com/media/catalog/category/NYC_2-compressor.jpg" alt=""> 
 
    <div class="layer-info"> 
 
    <h5>NYC</h5> 
 
    <p class="small">USA</p> 
 
    <ul class="absolute-bottom"> 
 
     <li><a href="">Hotels</a></li> 
 
     <li><a href="">What to do</a></li> 
 
     <li><a href="">Tickets</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

<a>（ビッグリンク）は、3つのリンクが、コンテンツ内部の両方の作業を行う1000のz-indexとrelativeに配置され、のような意味的に正しい、999のz-index位置決めされますよく