Link innerhalb des Links

Question

Wenn ich Code wie diesen habe, wie kann ich Link von .layer oder .layer-info machen? Ich bevorzuge Lösung ohne JavaScript, aber ich werde für jede Art von Lösung glücklich sein.

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

Beispiel Arbeiten ist hier: http://codepen.io/anon/pen/VaEPdy

Answer 1

Sie position ing es erreichen nutzen können. Es gibt auch Nebenwirkungen. Fügen Sie einen absolute ly Position <a> innerhalb der Schicht, die bereits relativ ist.

Auf diese Weise gibt es nur wenige Dinge:

• Sie haben die ganze Schicht in einen klickbaren Link.
• Die inneren Links, die textuellen Links sind noch funktionstüchtig.
• Kein JavaScript.
• Art der Links, innerhalb einer Verbindung wird erreicht.
• Semantisch gültig.

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>

Der <a> (big-Link) mit z-index von 999 positioniert, während die drei Verbindungen innerhalb des Inhalts relative mit z-index von 1000 machen beide arbeiten und semantisch korrekt positioniert sind, wie Gut.