zindex unclickable link when background div is brought to front with jquery?

I have a number of 'articles' that are an image with the text in an underlying div. When hovering over the article, jQuery brings the text div to the front. However, I'm unable to click on any of the text in the div, so I am assuming there is some confusion with the zindex and positioning.

I'm not entirely sure what's happening though as the div is visually above and must be above with the zindex, but it doesn't work!

JS Bin: http://jsbin.com/ukari4

Thanks a lot!

Code:

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  article {
    margin: 25px;
    position: relative;
    display: block;
    float: left;
}

article>div.frontimage {
    position: relative;
    top: 0;
    left: 0;
}

article>div.entry {
    background: red;
    position: absolute;
    top: 3px;
    left: 5px;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.below {
    z-index: -100;
}

.above {
    z-index: 1000;
}
</style>
</head>
<body>
  <article> 
    <div class="frontimage"><img src="http://placehold.it/350x500" alt="" width="350" height="500" /></div> 

    <div class="entry"> 
        <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>    
</article>

<article> 
    <div class="frontimage"><img src="http://placehold.it/300x300" alt="" width="300" height="300" /></div> 

    <div class="entry"> 
        <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>    
</article>
</body>
</html>

JS:

var $j = jQuery.noConflict();

$j(document).ready(function(){

    $j('article').hover(
        function(){
            $j(this).children('.frontimage').addClass('below');
            $j(this).children('.entry').addClass('above');
        },
        function() {
            $j(this).children('.frontimage').removeClass('below');
            $j(this).children('.entry').removeClass('above');
        }    
    );

});

Solution

Made a few small modifications and it works. Notably, I removed the 'above' and 'below' classes, as they are not necessary, and I kept all the z-indexes positive. Seems to have done the trick.

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  article {
    margin: 25px;
    position: relative;
    display: block;
    float: left;
}

article>div.frontimage {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
}

article>div.entry {
    background: red;
    position: absolute;
    top: 3px;
    left: 5px;
    height: 100%;
    width: 100%;
    z-index: 5;
}
</style>
</head>
<body>
  <article> 
    <div class="frontimage"><img src="http://placehold.it/350x500" alt="" width="350" height="500" /></div> 

    <div class="entry"> 
        <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>    
</article>

<article> 
    <div class="frontimage"><img src="http://placehold.it/300x300" alt="" width="300" height="300" /></div> 

    <div class="entry"> 
        <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>    
</article>
<script>
    var $j = jQuery.noConflict();

    $j(document).ready(function(){

        $j('article').hover(
            function(){
                $j(this).children('.frontimage').css('z-index', '1');
            },
            function() {
                $j(this).children('.frontimage').css('z-index', '10');
            }    
        );

    });
</script>
</body>
</html>