jquery：悬停和悬停（一个接一个）

Question

我不确定这是否可能：我想悬停一个元素时有一个效果，然后是新悬停的另一个效果，依此类推......

$('.suivre').hover(function(){
        $(this).css({"transform": "translate(50%,0)" }).addClass('suivre2');
    });
$('.suivre2').hover(function(){
        $(this).css({"transform": "translate(0,50%)" }).addClass('suivre3');
    });

我尝试使用和不使用addClass。只有第一个悬停才有效。

我也尝试使用鼠标悬停并获得相同的结果

$('.suivre').mouseover(function(){
        $(this).css({"transform": "translate(50%,0)" }).addClass('suivre2');
    });
    $('.suivre2').mouseover(function(){
        $(this).css({"transform": "translate(0,50%)" }).addClass('suivre3');
    });

也许，我最好还是寻找另一种方式。

谢谢你@ j08691的重复标志。我确实找到了解决方案：

$('.social').on('mouseover', '.suivre', function(){
        $(this).css({"transform": "translate(50%,0)" }).addClass('suivre2').removeClass('suivre');
    });
    $('.social').on('mouseover', '.suivre2', function(){
        $(this).css({"transform": "translate(50%,50px)" }).addClass('suivre3').removeClass('suivre2');
    });