HTML/CSS: ссылка на изображение, частично покрытая другой ссылкой на изображение, не может быть нажата

Question

У меня есть два тега, содержащие теги. Они позиционируются относительно, и один имеет отрицательный z-индекс, чтобы появляться позади другого. Они смещены, так что на нижней линии есть много видимой области. Нижняя ссылка не доступна для кликов и не регистрирует CSS-зависания. Большая часть того, что я могу найти в Интернете, предлагает установить элемент покрытия «pointer-events: none», однако мой элемент покрытия также является ссылкой, поэтому я все еще хочу, чтобы он был доступен для кликабеля.

EDIT: jsfiddle проблема демонстрирующее: 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

Ваша вторая ссылка/круг имеет Z-индекс -5, который всегда будет ставить его под все остальное (если вы не используете еще нижний z-индекс рядом с ним). Сделайте второе звено/круг z-index не менее 0, но наклоннее выше остальных двух кругов; В этом случае я использовал z-index: 2.

Я рекомендую это:

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

И добавить CSS определение все а hrefs как дисплей: встроенный блок, как это:

a { 
    display: inline-block; 
} 

Другой способ сделать это, чтобы создать три дивы и сделайте их border-radius: 100%, таким образом, их перекрытия на самом деле являются кругами, а не квадратами, создаваемыми внутри href и png-изображением внутри.

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>