title: jquery : hover and hover (one after another)
body: <p>I'm not sure if it's possible like this : I'd like to have one effect when I hover an element, then another effect with a new hover, and so on...</p>
  
  <pre><code>$('.suivre').hover(function(){
          $(this).css({"transform": "translate(50%,0)" }).addClass('suivre2');
      });
  $('.suivre2').hover(function(){
          $(this).css({"transform": "translate(0,50%)" }).addClass('suivre3');
      });
  </code></pre>
  
  <p>I tried with and without addClass. Only the first hover is working.</p>
  
  <p>I also tried with mouseover and had the same result</p>
  
  <pre><code>$('.suivre').mouseover(function(){
          $(this).css({"transform": "translate(50%,0)" }).addClass('suivre2');
      });
      $('.suivre2').mouseover(function(){
          $(this).css({"transform": "translate(0,50%)" }).addClass('suivre3');
      });
  </code></pre>
  
  <p>Maybe, i'd better search for another way.</p>
  
  <p>Thank you @j08691 for the duplicate flag. I did find a solution in it :</p>
  
  <pre><code>$('.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');
      });
  </code></pre>