Question

我有几层照片，彼此叠加，有不同的z-index＃'s：

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

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

当鼠标悬停在菜单项上时，我会看到预览缩略图，但在我点击显示图层后，我不希望任何预览缩略图再显示。

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

这适用于页面加载if ($("#layer1").css("z-index") < "0") {
但是，在您单击以更改 z-index 后， if / else 语句仍然认为它是旧的z-index。这是我所说的简单的小提琴：http://jsfiddle.net/YktAZ/52/
点击 MENU 2 会触发其他。

我希望这不会令人困惑。这是我正在处理的实际网站。点击COVERS＆amp;然后在显示的新菜单项上展开悬停或点击：URL

Answer 1

你的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有了更好的理解，你就可以修改这段代码来做你真正需要它做的事情。

jQuery如果z-index＆lt; （小于）0然后悬停别的做其他事情

1 个答案: