How to set negative z-index with jQuery?

Question

I have two buttons, a left arrow and a right arrow to navigate through my slideshow. The slideshow has several parts. If one part ends the next button hides. But even if it's not visible it's still clickable and that messes up my code because I have a counter. To make it "unclickable" I would like to change the css via jquery to z-index: -1; but it doesn't work. I tried following:

$('#bx-next').css({"zIndex":"-1"});

and also:

$('#bx-next').css({zIndex:-1});

How to do it right? Didn't find anything on google - but it has to be possible, right?

Answer 1

You do it like this:

$('#bx-next').css('z-index', '-1');

If you want more than one, you can do this:

$('#bx-next').css({
  'z-index' : '-1',
  'color' : 'red',
  'background' : 'blue'
});

You don't need to use {} if you're only dealing with one element to change.

Also, if this doesn't work there's a good chance that z-index isn't doing anything (maybe it's not position'd?

Please note: When a css object has a - in it, it needs to be surrounded in quotes. z-index wont work, where as 'z-index' will.

eg:

$('#bx-next').css(z-index, -1);     // wont work
$('#bx-next').css('z-index', '-1'); // works

New answer

 $('#bx-next').parent().css('z-index', '-1');

parent() will get the parent element, which is what is actually changing the links.

Answer 2

$('#bx-next').css("z-index", "-1");

Answer 3

you can do like this :-

$('#bx-next').css('z-index', '-1');

OR

$('#bx-next').attr('style','z-index:-1;');