[Solved – 10 Answers] Click through a DIV to underlying elements

pointer-events: none;
background: url('your_transparent.png');

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) 
{
        _range-selector.hide();
 $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
}
);

$('#elementontop).click(function (e) 
{
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
}); 

$('.overlay').click(function(e)
{
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

#overlay 
{
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

body 
{
  margin: 0;
  padding-left: 10px;
  font: 20px Arial, sans-serif;
  line-height: 30px;
}
a:hover 
{  color: blue;
}
#overlay-blocking,
#overlay-passing
{
  position: absolute;
  height: 40px;
  width: 10em;left: 0;
}
#overlay-blocking 
{
  top: 30px;
  background: rgba(0,100,0, .2);    
  pointer-events: none;
}
#overlay-passing 
{ 
top: 0;
  background: rgba(100,0,0, .2);    
}
<a href="#">Link blocked</a><br>
<a href="#" title="hoverable">Link available</a><br>
<a href="#" title="hoverable">Link available</a><br>    
<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>

<a href="/categories/1">
    <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
        <div class="caption bg-orange">
            <h2>
                test1
            </h2>
        </div>
</a>

var clickarray=[];
function getcoo(thatdiv)
{
         thatdiv.find(".link").each(function()
{
          var offset=$(this).offset();           
          clickarray.unshift([(offset.left),
          (offset.top),
          (offset.left+$(this).width()),
           (offset.top+$(this).height()),
           ($(this).attr('name')),
          1]);
});
}

$("body").click(function(event)
{
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray)
{
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1)
{
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
}
}
          if(job.length>0)
{   
             // --do some thing with the job --
}
});

<div class="listContainer">
    <div class="listRow" id="listRow1">
        <div class="listItemName">List item #1</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
    <div class="listRow" id="listRow2">
        <div class="listItemName">List item #2</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
</div>

$("div.listRow").click(function()
{
    $(this).toggleClass("selected");
}
)

<div class="container">
<div class="clickthrough">Mouseover</div>
 <button onClick="alert('click!');">Click me</button>
</div>

.container 
{
    position: relative;
}
.clickthrough 
{
    position: absolute;
}
.container:hover .clickthrough 
{
    opacity: 0.25;
    pointer-events: none;
}