Question

我想要的是这个

我将鼠标悬停在元素上，并显示其标题。这很简单。

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

我似乎无法向右迈出第二步。我点击其他元素后，我不知道如何重新添加悬停状态。

这是我到目前为止所做的：

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

谢谢

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

现在我点击图片2，标题现在停留，不再褪色。但是，当你悬停进出时，image1的淡入标题将返回到原始状态，即淡入淡出状态。

Answer 1

您可以将一个类添加到“活动”标题，然后在悬停操作中对其进行检查，而不是解除悬停操作的绑定：

$('.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/

如何解除悬停状态但将其还原给其他人？

1 个答案: