0

ここでのこの質問によると、2つのセットの1つのナビゲーション要素が、もう1つのナビゲーション要素がホバーされたときに消えるようにしようとしています。一方が他方に先行する必要があるため、これは現在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

疑似クラス :hover をセレクターとして使用できるかどうかはわかりません...しかし、このようなものが必要だと思います

    $('.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:red を opacity/display none に変更するだけです。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 に答える