Hi,
I have a block of pic which has hover effect (with jquery) from greyscale to color on hover. Also it has title text(positioned absolute). In order to have whole block of pic to have link I had positioned anchor element absolute with 100% width and height and having highest z-index. All work well in all browsers like chrome, firefox, opera and safari, except IE (All versions including 10). In IE whole pic block do not get link inspite of having anchor element having hightest z-index. Pls help. Below is my HTML and CSS.
HTML : -
<li>
<img alt="" src="images/eventb1.1.jpg"> <!-- This is greyscale image -->
<a href="#"></a> <!-- This is anchor covering whole pic block -->
<div class="evtext"> <!-- This is block title -->
<h6>QUBEEY LAUNCH</h6>
</div>
<div class="eventhover"> <!-- This is color hover image -->
<img alt="" src="images/eventb1.1_hover.jpg">
</div>
</li>

CSS : -
.eventsgrid ul li {
position: relative;
float: left;
width: 33.37%;
}
.eventsgrid ul li > a {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}
.evtext {
left: 0;
position: absolute;
top: 42%;
width: 100%;
z-index: 99;
}
.eventhover {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9;
}