7

カーソルを合わせたときに、ある div を別の div に置き換えたい。具体的には、「苦労している」や「期待を超えている」などの単語の平均があり、ユーザーが単語の平均にカーソルを合わせたときに、これを数値の平均に置き換えたいと考えています。

#html

<div class="switch avg_words float_left">
  A+ (hover to see score)  
</div>
<div class="avg_num">
  AVG = 98.35%
</div>

#css

.avg_num {
display: none;
}

#jquery

$('.switch').hover(function() {
    $(this).closest('.avg_words').hide();
    $(this).next('div').closest('.avg_num').show();
}, function() {
    $(this).next('div').closest('.avg_num').hide();
    $(this).closest('.avg_words').show();
});

最初の div を非表示にして 2 番目の div に置き換えるのは簡単ですが、ホバーが終了したときに通常の状態に戻すコードに問題があります。ホバーすると、 がdiv交互に点滅します。

http://jsfiddle.net/uXeg2/1/

4

5 に答える 5

11

スイッチ クラスを外側の div に移動します。

<div class="switch">
<div class="avg_words float_left">
  A+ (hover to see score)  
</div>
<div class="avg_num">
  AVG = 98.35%
</div>
</div>

$('.switch').hover(function() {
        $(this).find('.avg_words').hide();
        $(this).find('.avg_num').show();
    }, function() {
        $(this).find('.avg_num').hide();
        $(this).find('.avg_words').show();
});

更新されたフィドル: http://jsfiddle.net/uXeg2/2/

于 2013-09-27T15:11:50.953 に答える
4

点滅は、クラスの設定方法の結果です。.switchと.avg_wordsはまったく同じ要素であるため、次のようになります。

  1. ホバー.switch
  2. .avg_words非表示です。つまり、.switch非表示です (同じ div です!)
  3. は非表示になっているため.switch、もうホバリングしていません
  4. .avg_wordsすぐに表示される
  5. .switch(ステップ 4 で) 表示されたばかりなので、再びホバリングしています。
  6. ステップ1に戻る

代わりに、.switch要素がラップされていることを確認し.avg_wordsて、ホバーしても非表示にならないようにします。

于 2013-09-27T15:09:56.787 に答える
2

ホバーイベントにバインドされている同じ要素を非表示にしているため、問題が発生しています。マークアップを変更してみてください:

<div class="switch float_left">
    <div class="avg_words">
        A+ (hover to see score)  
    </div>
    <div class="avg_num">
      AVG = 98.35%
    </div>
</div>

次に、JavaScript を次のように変更します。

$('.switch').hover(function() {
        $(this).find('.avg_words').hide();
        $(this).find('.avg_num').show();
    }, function() {
        $(this).find('.avg_num').hide();
        $(this).find('.avg_words').show();
});
于 2013-09-27T15:12:38.647 に答える