检测按钮单击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

从z-index:-1移除#car_slider，z-index:1;移出#animate即可解决您的问题。

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

修改

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

检查Fiddle Here.

<强>更新

对于chrome，你必须为z-index div设置#animate低于#close_btn并且它有效。

检查Updated Fiddle Here.

Answer 3

修改

我明白你的意思，你在这里。使用条件。

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");
    }

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