检测按钮单击 z-index -1

Question

您好，这是我的Jsfiddle 代码。当动画停止时，从右到左然后从左到右有一个动画，然后从底部出现一个汽车图像。我想检测是否点击了汽车图像，然后我必须打开一个新窗口。汽车图像 z-index 设置为 -1，以便关闭按钮可见，但如果我无法检测到点击功能。我该怎么做才能让它发挥作用。 当我们点击关闭按钮时，它会隐藏所有内容并显示一个 div。

#car_slider {
    position:fixed;
    bottom:-10px;
    width:300px;
    height:0;
    border:2px solid #000;
    z-index: -1;

}

我尝试使用这行代码，但它没有检测到点击。

$("#car_slider").click(function() {
    window.open('//www.google.com', '_blank');
});

Answer 1

输入 z-index:1;

    #car_slider {
        position:fixed;
        bottom:-10px;
        width:300px;
        height:0;
        border:2px solid #000;
        z-index: 1;
}

demo

Answer 2

编辑：

我明白你的意思了，你来了。使用条件。

var linked = false;
moveLeft();            
$('#leave_panel').hide();
$("#logo").click(function() {
    window.open('//www.sizmek.com', '_blank');
});

$("#car_slider").css("z-index", "1").click(function() {
    if(linked === false){
        console.log("linked away!");
        linked = true;
    } else {
         $("#car_slider").css("z-index", "-1");
    }

这将检查图像是否被点击，如果是，它将链接它们，然后，他们也可以关闭图像。

Answer 3

只需从#car_slider 中删除z-index:-1 和从#animate 中删除z-index:1; 即可解决您的问题。

您的代码中无需设置任何z-index。

编辑：

要使关闭按钮可点击，请将z-index 设置为#close_btn

查看Fiddle Here.

更新：

对于 chrome，你必须将 z-index 的 #animate div 设置为低于 #close_btn 并且它可以工作。

查看Updated Fiddle Here.