jquery - Click event not firing on a div containing overlaid images in Firefox -


i'm trying show popup when clicks on youtube thumbnail. works fine in chrome click event isn't firing in firefox.

i've managed cut problem down i've got below (fiddle here)

<div class="youtube">     <img class="thumb" src="http://img.youtube.com/vi/rsylgfbepm4/mqdefault.jpg" alt="marrakech"/>     <img class="playbutton" src="http://ec2-54-229-110-227.eu-west-1.compute.amazonaws.com/content/images/videoplay.png" alt="play button"/> </div> 

the attach happening fine handler doesn't called in firefox

$(".youtube").click(function () {     alert('clicked');     return false; }); 

i suspect it's positioning/layout of div or images

.youtube {     margin: 5px;     width: 320px;     height: 180px;     overflow: hidden;     cursor: pointer;     border: solid 5px #f00;     position: relative; }  div.youtube img.thumb {     position:relative;     z-index:-1; }  .youtube img.playbutton {     height: auto;     width: 160px;     position:relative;     left:20px;     top:-160px;     z-index:-1;     opacity: .7; } 

can point out mistake? (i've noticed border of div catches clicks appropriate, not content)

with positive z-index set on .youtube class works fine on ff too.

code:

.youtube {     margin: 5px;     width: 320px;     height: 180px;     overflow: hidden;     cursor: pointer;     border: solid 5px #f00;     position: relative;     z-index: 1; }  

i'm searching reason on net...

demo: http://jsfiddle.net/irvindominin/6zkua/

edit

i think reason why defining elements in same stacking context relative, firefox in context assume undefined if z-index not set element @ lower index.

reference: https://developer.mozilla.org/en-us/docs/web/guide/css/understanding_z_index/the_stacking_context


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -