Sibling opacity

Question

According to this question here , I am trying to make one navigational element in a set of two disappear when the other hangs. Since one of them necessarily precedes the other, this is apparently not possible with CSS right now, so it needs to be done using jQuery.

I have the following jQuery line at the top of my page (inside the script element), but it does not seem to work:

$(document).ready(function(){
  $('.sb-bignav:hover').siblings().css({
    'opacity': '0',
    '-webkit-opacity': '0',
    '-moz-opacity': '0'
  });
});

I assume that the syntax itself is correct, so I believe that I just do not do it right ... Can someone please indicate what happened?

Thanks!

EDIT: as requested here HTML:

<div id="sb-body">
  <a id="sb-nav-previous" class="sb-bignav" title="Previous" onclick="Shadowbox.previous()"></a>
  <a id="sb-nav-next" class="sb-bignav" title="Next" onclick="Shadowbox.next()"></a>
  <div id="sb-body-inner">
    <img style="position: absolute;" src="Corrosion.jpg" id="sb-player" height="405" width="609">
  </div>
</div>

Answer 1

script, :

jsFiddle1

, , :

jsFiddle2

. on()

. siblings()

Answer 2

im , : ... , -

    $('.sb-bignav').hover(function() {
        $(this).siblings().css({
            'opacity': '0',
            '-webkit-opacity': '0',
            '-moz-opacity': '0'
        });
    });

Answer 3

, , script:

$(document).ready(function(){
    $('.sb-bignav').each(function(){
        $(this).hover(function(){
            $(this).siblings().css('color', 'red');
            $(this).css('color', 'black');
        });
    });
});

: / . color: black .

Answer 4

, @NaOH, ( ). jQuery .hover() . css , , , :

$(document).ready(function() {
    $('.sb-bignav').hover(function() {
        $(this).siblings('.sb-bignav').css('visibility','hidden');
    }, function() {
        $(this).siblings('.sb-bignav').css('visibility','visible');
    });
});

DEMO