HTML/CSS: Bild-Link teilweise von einem anderen Bild-Link abgedeckt ist nicht anklickbar

Question

Ich habe zwei Tags mit Tags. Sie sind relativ positioniert, und einer hat einen negativen Z-Index, um hinter dem anderen zu erscheinen. Sie sind jedoch versetzt, so dass auf der unteren Strecke viel Sichtfläche ist. Der untere Link ist nicht anklickbar und registriert keine CSS-Hover. Das meiste, was ich online finde, schlägt vor, das Covering-Element auf "pointer-events: none" zu setzen, aber mein Covering-Element ist auch ein Link, also möchte ich immer noch klickbar sein.

EDIT: jsfiddle Demonstrieren Problem: https://jsfiddle.net/cfbxz7pb/

<div style="position: relative"> 
 

 
<a href="http://www.google.com" style="position: relative"> 
 
    <img style="width: 150px" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 
<a href="http://www.facebook.com" style="position: relative; left:-60px; z-index: -5"> 
 
    <img style="width: 150px; -webkit-filter: hue-rotate(80deg)" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 
<a href="http://www.twitter.com" style="position: relative; left:-120px"> 
 
    <img style="width: 150px; -webkit-filter: hue-rotate(120deg)" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 

 
</div>

Answer 1

Ihr zweiter Link/Kreis hat z-index von -5, die es immer unter etwas anderes setzen werden (es sei denn, Sie verwenden eine selbst niedrigerer Z-Index daneben). Machen Sie den zweiten Link/Kreis Z-Index mindestens 0, aber deutlich höher als die anderen beiden Kreise; Ich habe in diesem Fall den Z-Index: 2 verwendet.

Ich empfehle dieses:

<a href="http://www.facebook.com" style="position: relative; left:-60px; z-index: 2"> 

Und fügen Sie CSS definieren alle ein hrefs wie display: inline-block wie folgt aus:

a { 
    display: inline-block; 
} 

Eine andere Möglichkeit, dies zu tun, drei divs zu schaffen und mache sie border-radius: 100%, so sind ihre Überlappungen eigentlich Kreise, nicht die Quadrate, die durch das a href- und das png-Bild darin erzeugt werden.

Answer 2

<div style="position: relative"> 
 

 
<a href="http://www.google.com" style="position: relative; z-index: 77;"> 
 
    <img style="width: 150px; " src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 
<a href="http://www.facebook.com" style="position: relative; left:-60px; z-index: 0"> 
 
    <img style="width: 150px; -webkit-filter: hue-rotate(80deg)" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 
<a href="http://www.twitter.com" style="position: relative; left:-120px; z-index: 0"> 
 
    <img style="width: 150px; -webkit-filter: hue-rotate(120deg);" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 

 
</div>