1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

MouseOver issue

Discussion in 'jQuery' started by mcradupopescu, Dec 9, 2019.

  1. #1
    Hi, I have a problem with a simple piece of code I wrote. I have a an overlay div that container another div (button) in the center. With jQuery I added some classes to trigger an animation but the problem is when I enter / exit the child div my main div mouseover animation triggers again.

    Here is the code

    <script>
    $(function(){
      $(".card").mouseenter(function(){
        $(this).find(".overlay").addClass('anim');
        $(this).find(".plus").addClass('animScale');
      });
     
     
      $(".card").mouseleave(function(){
        $(this).find(".overlay").removeClass('anim');
        $(this).find(".plus").removeClass('animScale');
      });
    })
    </script>
    
    
    
    <div class="overlay">
        <div class="plus">+</div>
      </div>
    
    
    
    
    .anim{
      animation: appear 0.6s linear;
      animation-fill-mode: forwards;
    }
    .animScale{
      animation: grow 0.6s linear;
      animation-fill-mode: forwards;
    }
    @keyframes appear{
      from{opatcity: 0;}
      to{opacity: 0.75;}
    }
    @keyframes grow{
      from{transform: scale(0.5);}
      to{transform: scale(1)}
    }
    
    Code (markup):

    SEMrush
     
    mcradupopescu, Dec 9, 2019 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,340
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #2
    What the blazes makes any of this JavaScript's job, much less the mentally enfeebled train wreck of how NOT to use JavaScript that is jQuery.

    You've got CSS, use it. It's called :hover, use it.

    Likewise this isn't something I'd waste animations on, a simple transition should handle it.... though are you SURE you don't want ANY animation on the mouse-out?!? I'd probably have it just run backwards.

    Assuming the .card is a parent of these elements and don't want ANY out animation:

    
    .overlay {
    	opacity:0;
    	transition:opacity 0s; /* no transition on mouse-out */
    }
    
    .card:hover .overlay {
    	opacity:1;
    	transition:opacity 0.6s;
    }
    
    .plus {
    	transform:scale(0.5);
    	transition:transform 0s; /* no transition mouse-out */
    }
    
    .card:hover .plus {
    	transform:scale(1);
    	transition:transform 0.6s;
    }
    Code (markup):
    If you want the animations to run backwards on mouse-out, remove the 0s lines and move the other transitions into the main elements thusly:

    
    .overlay {
    	opacity:0;
    	transition:opacity 0.6s;
    }
    
    .card:hover .overlay {
    	opacity:1;
    }
    
    .plus {
    	transform:scale(0.5);
    	transition:transform 0.6s;
    }
    
    .card:hover .plus {
    	transform:scale(1);
    }
    Code (markup):
    If they're not children of .card try to get at them using adjacent sibling selectors. We'd have to see the full markup to say for sure.

    This just isn't JS' job. Also depending on what .card is (tell me that's not the equally mentally enfeebled train wreck laundry list of how NOT to use HTML and CSS that is bootcrap!) you might also want to add :focus for keyboard navigation.

    You are coding for alternative navigation, right?
     
    Last edited: Dec 10, 2019
    deathshadow, Dec 10, 2019 IP