jQuery if z-index < (less than) 0 then do hover else do something else

Question

I have several layers of photos, stacked on top of each other with different z-index #'s:

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

There are corresponding menu items that when clicked, hide all photo layers and reveal its related layer of photos. I do this by setting the z-index of the photo layers behind the background image (I can't hide, because I need them to load and be ready to display) and have jquery change the z-index on click, then fadeIn.

When hovering over a menu item, I have a preview thumbnail appear, but after I click to reveal a layer, I don't want any of the preview thumbnails to show any longer.

I'm assuming I can use an if/else statement

This works on page load if ($("#layer1").css("z-index") < "0") {
however after you click to change the z-index, the if/else statement still thinks it's the old z-index. Here's a simple js fiddle of what I am talking about: http://jsfiddle.net/YktAZ/52/
Clicking on MENU 2 should trigger the else.

I hope this isn't confusing. Here is the actual website I am working on. Click on COVERS & SPREADS then hover or click on the new menu items that appear: URL

[an `id` starting with a number isn't valid](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html). I suspect you'll get unpredictable results unless you change that. — steveax, Apr 20 '12 at 01:40
"I can't hide, because I need them to load and be ready to display". Alternatively, you could use `visibility: hidden`. Also, I see nothing related to `z-index` in your jsFiddle, and there is no if/else triggering on click.. — Christian, Apr 20 '12 at 02:17
I posted the wrong jsFiddle. I re-edited it and posted the correct one. /sorry — rod, Apr 20 '12 at 02:21

score 3 · Accepted Answer · answered Apr 20 '12 at 02:31

There's nothing wrong with your jsFiddle, it runs exactly as expected. You've written a statement to execute some code once (javascript doesn't sit there looping your code), then you've bound a click handler to change the z-index of the image. That's all your click handler does - it only changes the z-index of the image. It doesn't rebind the initial hovers or run any other code to change anything.

If you want to alter the hover states you defined at the start of the code, you'll have to run those functions again. You can do this by placing the code in a function, and calling it inside your click handler. Example:

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

The jsFiddle is here: http://jsfiddle.net/YktAZ/53/. Once you have a better understanding of javascript, you'll be able to modify this code to do what you actually need it to do.

Thanks Christian. That's exactly what I was after. Simple stuff, I'm sure, but my knowledge is limited (but growing). — rod, Apr 20 '12 at 02:44
Haha well you've got to start somewhere, luckily javascript is pretty easy to learn, and you can be building really cool stuff with jQuery quite quickly if you put your mind to it :) — Christian, Apr 20 '12 at 03:33

jQuery if z-index < (less than) 0 then do hover else do something else

1 Answers1