1

私がしたいことはこれです

要素にカーソルを合わせると、そのキャプションが表示されます。簡単だ。

しかし、要素をクリックしてそのホバー状態を維持したいのですが、他の要素にはまだホバー効果があります。

2番目のステップを正しく行うことができないようです。他の要素をクリックした後にホバー状態を追加する方法がわかりません。

これが私がこれまでに持っているものです：

http://jsfiddle.net/62cRZ/1/

ありがとうございました

編集：悪い説明で申し訳ありません。これが私が意味したことです。さて、image1 と image2 があります。image1 をクリックすると、キャプションが残り、フェードアウトしなくなります。image2 にカーソルを合わせると、キャプションがフェード インおよびフェード アウトします。

image2 をクリックすると、キャプションが消えずに残ります。しかし、イメージ 1 のフェード キャプションは、ホバー インとアウトのときにフェード インとフェード アウトする元の状態に戻ります。

4

1 に答える 1

0

ホバー アクションのバインドを解除する代わりに、「アクティブな」キャプションにクラスを追加し、ホバー アクションでそれをチェックすることができます。

$('.pic').hover(function() {
    var caption = $(".caption",this);
    if ( ! caption.hasClass("active") ) { 
        caption.stop().fadeIn();
    }
},
function() {
    var caption = $(".caption",this);
    if ( ! caption.hasClass("active") ) { 
        caption.stop().fadeOut();
    }
});

$('.pic').click(function() {
    //fade out all other captions that have kept their hover states/ This wasn't the first pic clicked on
    $('.caption').fadeOut().removeClass("active");

    //fade in only this caption when clicked
    $(".caption", this).fadeIn().addClass("active");

});​

例: http://jsfiddle.net/bstakes/62cRZ/9/

于 2012-07-12T11:53:04.323 に答える