0

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...

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

I tried with and without addClass. Only the first hover is working.

I also tried with mouseover and had the same result

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

Maybe, i'd better search for another way.

Thank you @j08691 for the duplicate flag. I did find a solution in it :

$('.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');
    });
PostIdentical
  • 17
  • 3
  • It is very weird and sounds like a bs but when you are adding class make sure that the one u added is being declared in your css after the default one. The order of classes in your css file depends somehow. – Steven Dropper Jul 12 '16 at 17:24
  • It could be causing conflicts in your css too. Why not remove the previous class and add a new class on hover? – Isabel Inc Jul 12 '16 at 17:27
  • @StevenDropper it's because the OP is binding hover (or mouseover) to elements that exist when the page loads, not when he adds the suivre2 class. That's what event delegation does. – j08691 Jul 12 '16 at 17:31
  • @IsabelInc it's because the OP is binding hover (or mouseover) to elements that exist when the page loads, not when he adds the suivre2 class. That's what event delegation does. – j08691 Jul 12 '16 at 17:31
  • Thats good to know. Thanks @StevenDropper – Isabel Inc Jul 12 '16 at 17:32
  • @IsabelInc - No problem. I was frustrated trying to figure out what is wrong with my code yet it was the order of classes in css... – Steven Dropper Jul 12 '16 at 17:34
  • Thanks for that. I can see what you mean. @j08691 – Isabel Inc Jul 12 '16 at 17:36
  • Thank you all ! @StevenDropper , Isabel Inc : I tried removeClass, but it's not working. j08691 I wiil study the previous post and update you as soon as I can. – PostIdentical Jul 12 '16 at 18:35

0 Answers0