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>

can you share the HTML as well, so we can see if anything is wrong? — balexandre, Sep 13 '12 at 06:28

score 2 · Accepted Answer · answered Sep 13 '12 at 06:43

2

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

answered Sep 13 '12 at 06:43

Mateusz Rogulski

7,357
7
44
62

you can remove the document ready part if you use: `$(document).on('hover', '.sb-bignav', function() { ... });` – balexandre Sep 13 '12 at 06:44
***Deprecated as of jQuery 1.8**: The name "hover" used as a shorthand for the string "mouseenter mouseleave".* - http://api.jquery.com/on/ - Good approach though, would be helpful to include the code in your answer – nbrooks Sep 13 '12 at 06:59

score 1 · Answer 2 · answered Sep 13 '12 at 06:46

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

score 1 · Answer 3 · answered Sep 13 '12 at 06:49

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.

answered Sep 13 '12 at 06:49

jr pineda

186
7

This doesn't appear to work... I'm using JSON syntax for the CSS, but that shouldn't make a difference, I presume? – NaOH Sep 13 '12 at 17:27

score 1 · Answer 4 · answered Sep 13 '12 at 06:54

1

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

answered Sep 13 '12 at 06:54

nbrooks

18,126
5
54
66

This doesn't appear to work in practice either... I'm even using your exact function, with no alterations, and it's still not working... – NaOH Sep 13 '12 at 17:32

Sibling Hover Opacity

4 Answers4

Linked