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>

回答1:

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

回答2:

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

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/12400561/sibling-hover-opacity

标签

jquery

jquery-selectors