1

我希望发生的是这样的

我将鼠标悬停在元素上，它们的标题就会出现。这很容易。

但我也想单击元素并保持悬停状态，而其他元素仍然具有悬停效果。

我似乎无法正确完成第二步。单击其他元素后，我不知道如何重新添加悬停状态。

这是我到目前为止所拥有的：

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

谢谢

编辑：抱歉描述不好。这就是我的意思。好的，所以有 image1 和 image2 当我单击 image1 时，标题保持不变，不再淡出。当我将鼠标悬停在 image2 上时，标题会淡入淡出。

现在我点击 image2，标题现在保持不变，不再褪色。但是当您将鼠标悬停在进出时，image1 的淡入淡出标题会返回到淡入淡出的原始状态。

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 回答