1

当有人点击 youtube 缩略图时，我试图显示一个弹出窗口。这在 Chrome 中运行良好，但点击事件在 Firefox 中没有触发。

我已经设法将问题减少到下面的问题（这里是小提琴）

<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>

附加正常，但在 Firefox 中未调用处理程序

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

我怀疑这与 div 或图像的定位/布局有关

.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;
}

有人可以指出我的错误吗？（我刚刚注意到 div 的边框捕获点击是合适的，只是没有任何内容）

4

3 回答 3

2

尝试：这个更新的 jsFiddle - 删除了 z-index 属性的多余使用。

.Youtube
{
    margin: 5px;
    width: 320px;
    height: 180px;
    overflow: hidden;
    cursor: pointer;
    border: solid 5px #f00;
    position: relative;
 }

div.Youtube img.Thumb {
    position:relative;
}

.Youtube img.PlayButton {
    height: auto;
    width: 160px;
    position:relative;
    left:20px;
    top:-160px;
    opacity: .7;
}
于 2013-08-24T09:25:55.703 回答
1

在.Youtube类上设置正 z-index 也可以在 FF 上正常工作。

代码：

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

我在网上找原因...

演示：http: //jsfiddle.net/IrvinDominin/6Zkua/

编辑

我认为原因是我们在同一个堆叠上下文中定义所有元素relative，但是在这种情况下，firefox 假设undefined如果没有设置 z-index，那么元素将始终处于较低的索引。

参考：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

于 2013-08-24T09:15:34.483 回答
1

将 z-index 显式添加到 Div 使其可以在 firefox 上运行

z-index:0

http://jsfiddle.net/LsqAq/3/

于 2013-08-24T09:16:43.143 回答