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

Question

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');
        }    
    );

});

score 1 · Accepted Answer · answered May 17 '11 at 15:19

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>

Works great. I wonder what exactly was happening with my initial code! Thanks a lot though! — waffl, May 17 '11 at 15:47
I think it had to do with the negative z-index value. I usually try to avoid doing that. — Jonathan Miller, May 17 '11 at 15:50
Ah. That's probably right, when inspecting the element, the surrounding article always seemed to be on top somehow, I will definitely take note to avoid negative z-indexes! Thanks again. — waffl, May 17 '11 at 16:24

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

1 Answers1