0

根据这里的这个问题，我试图让一组两个中的一个导航元素在另一个悬停时消失。因为一个必须在另一个之前，这显然是目前 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>
4

4 回答 4

2

您的脚本可以正常工作：

jsFiddle1

但我认为您希望您的程序可以作为：

jsFiddle2

还：

.on() 文档

和

.siblings() 文档

于 2012-09-13T06:43:04.640 回答
1

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

    $('.sb-bignav').hover(function() {
        $(this).siblings().css({
            'opacity': '0',
            '-webkit-opacity': '0',
            '-moz-opacity': '0'
        });
    });
于 2012-09-13T06:46:09.740 回答
1

据我了解您的问题，这是您可以对脚本执行的操作：

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

只需将颜色：红色更改为不透明度/不显示。color:black 用于悬停的元素。

于 2012-09-13T06:49:18.313 回答
1

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

演示

于 2012-09-13T06:54:35.760 回答