Question

根据this question here，我试图在另一组中有一个导航元素在另一个悬停时消失。因为一个必然先于另一个，所以目前显然不可能使用CSS，因此需要使用jQuery。

我在页面顶部（脚本元素内部）有以下jQuery行，但它似乎不起作用：

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

我认为语法本身是正确的，所以我认为我只是没有做到这一点......任何人都可以指出什么是错的？

谢谢！

编辑：根据要求，这是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

您的脚本可以正常运行：

jsFiddle1

但我认为你希望你的程序能够像：

jsFiddle2

也：

.on() documentation

和

.siblings() documentation

Answer 2

我不确定我们可以使用伪类：悬停为选择器... 但我猜你需要这样的东西

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

Answer 3

据我了解你的问题，你可以对你的剧本做些什么：

$(document).ready(function(){
    $('.sb-bignav').each(function(){
        $(this).hover(function(){
            $(this).siblings().css('color', 'red');
            $(this).css('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

兄弟姐妹悬停不透明度

4 个答案: