Sibling Hover Opacity

Question

As per this question here, I'm trying to have one navigational element in a set of two disappear when the other is hovered. Because one necessarily precedes the other, this is apparently not possible currently with CSS, so it needs to be done with jQuery.

I have the following line of jQuery at the top of my page (inside a script element), but it doesn't appear to be working:

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

I assume the syntax itself is correct, so I presume I'm just not doing this right... Can anyone point out what's wrong?

Thanks!

EDIT: As requested, here's the 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

As I understand your question this is what you could do to your script:

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

just change color:red to opacity/display none. color:black is for the element being hovered.

Answer 2

Your problem, @NaOH, is very basic (no pun intended). You can use the jQuery .hover() method to accomplish this. You can substitute any css effect for this, but I think this is the effect you are trying to achieve:

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

DEMO

Answer 3

im not sure we can use pseudoclass :hover as selector... but i guess you need something like this

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

Answer 4

There is your script which work correctly:

jsFiddle1

But I think you want to your program works as:

jsFiddle2

also:

.on() documentation

and

.siblings() documentation