Reputation: 459

Sibling Hover Opacity

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>

Upvotes: 0

Answers (4)

nbrooks

Reputation: 18233

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

Upvotes: 1

jr pineda

Reputation: 186

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.

Upvotes: 1

bondythegreat

Reputation: 1409

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

Upvotes: 1