0

我有几层照片，用不同的 z-index #'s 堆叠在一起：

#layer1 {position: absolute; z-index:-1}
#layer2 {position: absolute; z-index:-2} and so on

有相应的菜单项，单击时，隐藏所有照片层并显示其相关的照片层。我通过在背景图像后面设置照片图层的z-index来做到这一点（我无法隐藏，因为我需要它们加载并准备好显示）并让 jquery在单击时 更改z-index ，然后淡入。

将鼠标悬停在菜单项上时，会出现预览缩略图，但是在单击以显示图层后，我不想再显示任何预览缩略图。

我假设我可以使用if/else语句

这适用于页面加载if ($("#layer1").css("z-index") < "0") {
，但是在您单击更改z-index后，if/else语句仍然认为它是旧的 z-index。这是我正在谈论的一个简单的 js fiddle：http: //jsfiddle.net/YktAZ/52/
单击MENU 2应该触发else。

我希望这不会令人困惑。这是我正在开发的实际网站。单击 COVERS & SPREADS 然后悬停或单击出现的新菜单项：URL

4

1 回答 1

3

您的 jsFiddle 没有任何问题，它完全按预期运行。您已经编写了一个语句来执行一些代码一次（javascript 不会坐在那里循环您的代码），然后您已经绑定了一个单击处理程序来更改z-index图像的。这就是您的点击处理程序所做的一切 - 它只会更改图像的 z-index。它不会重新绑定初始悬停或运行任何其他代码来更改任何内容。

如果要更改在代码开头定义的悬停状态，则必须再次运行这些函数。您可以通过将代码放在一个函数中，并在您的点击处理程序中调用它来做到这一点。例子：

function swap_hover() {
    if ($("#image").css("z-index") < "0") {
        $("#menu1").hover(function() {
            $(this).css("background-color", "red");
        }, function() {
            $("#menu1").css("background-color", "white");
        });
    }
    else {
        $("#menu1").hover(function() {
            $(this).css("background-color", "blue");
        }, function() {
            $("#menu1").css("background-color", "white");
        });
    }
}

swap_hover();

$("#menu2").click(function() {
    $("#image").css("z-index", "1");

    swap_hover();
});

jsFiddle 在这里：http: //jsfiddle.net/YktAZ/53/。一旦你对 javascript 有了更好的理解，你就可以修改这段代码来做你真正需要它做的事情。

于 2012-04-20T02:31:24.767 回答