I've got a simple addClass function to add a class on hover so that I can apply a CSS transition to it. I also want the CSS transition to apply when the mouse leaves the container but It doesn't work because I have .removeClass here:

$('.targetContainer').hover(
            function(){ $(this).addClass('ImageHover') },
            function(){ $(this).removeClass('ImageHover') }         
)

I've tried the setTimeout like so:

    $('.targetContainer').hover(
        function(){ $(this).addClass('ImageHover') },
        setTimeout(
            function() 
            {
                $(this).removeClass('ImageHover') 
            }, 5000)
 )

but I can't get that to work. I also tried the delay function but I understand that can only be used with queues?

CodePudding user response：

You have two problems.

1. The second value you pass to hover() needs to be a function. You're calling setTimeout immediately and passing the return value to hover().
2. this means something different when it is in a function called by setTimeout. See this question

CodePudding user response：

Try to do this with css not jquery.

Use .yourClass:hover and .yourClass to add the CSS correctly. For example the CSS that you should to write in .yourClass:hover is the CSS that has the class .imageHover

Also I use this additional class (in your normal class not in :HOVER) that give some effects on transition

.yourNormalClass{
   /* ADDITIONAL CSS TO YOUR NORMAL CLASS */
   -webkit-transition: all 0.3s ease;                  
   -moz-transition: all 0.3s ease;                 
   -o-transition: all 0.3s ease;   
   -ms-transition: all 0.3s ease;          
   transition: all 0.3s ease;
}

.yourNormalClass:hover{
   /* Add the CSS apply to ImageHover class here */
}

I hope that my info help you :).

Kind regards.

CodePudding user response：

you are adding and removing the same class (ImageHover) and it is not logical. You first add this class to the element and then remove it from that same element, so that it has no class at the end! For transition after mouse leave, you can use onmouseleave() event, too. Good Luck