2

「SUBSCRIBED」というボタンがあり、ユーザーがその上にマウスを置くと、「UNSUBSCRIBE」という別のボタンに置​​き換えたいと思います。

（TwitterにFOLLOWINGボタンがあり、ホバーするとUNFOLLOWに変わるようなものです。）

これが私がこれまでに得たものです。

$(document).ready(function(){
    $('#subscribed_button').hover(function(){
        $('#subscribed_button').css("display","none");
        $('#unsubscribe_button').css("display","inline");
    },function(){
    });
    $('#unsubscribe_button').hover(function(){
    },function(){
        $('#unsubscribe_button').css("display","none");
        $('#subscribed_button').css("display","inline");
    });
});

すばやくマウスを押す場合を除いて、すべて問題ありません。その場合、「ホバーオン」は検出されたように見えますが、「ホバーオフ」は検出されません。そのため、ボタンが「UNSUBSCRIBE」で動かなくなることがあります...これは奇妙で視覚的に気が散ります。

Stackoverflowで見たソリューションのほとんどは、アニメーションの停止に関連していますが、この場合、私は何もアニメーション化していません。シンプルな表示のオン/オフです。

何か案は？

4

3 に答える 3

3

実際にそれを見なくても、2つの異なるhtml要素を表示/非表示にしていることが原因だと思います。マウスをすばやく移動すると、非アクティブな要素がアクティブにならないなどの問題が発生する可能性があります。

安定性とパフォーマンスを向上させるために、次のことをお勧めします。

購読/購読解除には 1 つの html 要素のみを使用し、2 つの要素を表示/非表示にするのではなく、ボタンのテキストを変更したり、css クラスなどを変更して背景画像を交換したりするだけです。画像の背景は、両方の状態を含む単一の背景画像を使用し、現在の状態に応じて背景の位置を更新するだけです。

上記は、コード全体を投稿していないため、単なる概念であるため、上記に合わせて変更することはできません。

于 2012-04-04T19:19:25.793 に答える
2

1 つの要素だけを使用します。

$(function() {
    var $sub = $('#subscribe_button');

    $sub.hover(function() {
        $sub.text('Unsubscribe');
    }, function() {
        $sub.text('Subscribe');
    });

});
于 2012-04-04T19:21:22.510 に答える
1

jQuery には、mouseenter と mouseleave というメソッドがあります。http://api.jquery.com/mouseenter/ それらを使用すると、適切なバブリングに役立ち、問題を解決するはずです。

于 2012-04-04T19:20:58.863 に答える