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
Post a Comment