Wie man einen Link unter einem div klickbaren

Question

Ich habe einen Link unter einem div mit 100% Höhe und Breite in einer festen Position und Z-Index: 5. Ich muss dieses div über meinen Link, aber den Link zu halten funktioniert nicht. Kann ich den Link verwenden, aber halte diesen div über meinem Link?

https://jsfiddle.net/8hu90e9x/1/

div { 
 
    background:grey; 
 
    width:100%; 
 
    height:100%; 
 
    position:fixed; 
 
    top:0; 
 
    opacity:0.5; 
 
    z-index:5 
 
} 
 

 
a { 
 
    font-size:50px; 
 
    z-index:0 
 
}

<a href="http://google.com"> My link</a> 
 

 
<div></div>

Answer 1

Sie könnten für Ihre div pointer-events:none; an die CSS-Regeln hinzufügen

div { 
 
    background:grey; 
 
    width:100%; 
 
    height:100%; 
 
    position:fixed; 
 
    top:0; 
 
    opacity:0.5; 
 
    z-index:5; 
 
    pointer-events:none; 
 
} 
 

 
a { 
 
    font-size:50px; 
 
    z-index:0; 
 
}

<a href="http://google.com"> My link</a> 
 

 
<div></div>

Answer 2

Wenn der Zweck dieses div nur ist die Hintergrundfarbe zu ändern, wäre es einfacher, es zu löschen und geben Sie stattdessen:

body{ 
    background-color:lightgrey; 
}