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

jacovkss2 · Aug 17, 2012

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/ukari4Thanks a lot!Code:\[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><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>\[/code\]JS:\[code\]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'); } );});\[/code\]

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

jacovkss2

New Member