pointer-events

a simple pointer-events example

by girlie_mac

HTML

<div style="position:relative">
    <div class="overlay"></div>
    <ul>
        <li><a href="javascript:alert('clicked');">link 1 on fading list</a></li>
        <li><a href="">link 2 on fading list</a></li>
        <li><a href="">link 3 on fading list</a></li>
    </ul>
<div>

CSS

.overlay {
    pointer-events: none; /* this make the link underneath clickable */
    
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
    position: absolute; top: 0; left: 0; width: 200px; height:50px; 
}

a {color:  #FF9C00;}
ul {list-style-type: none; padding-left: 10px;}