How to get jQuery Hover to be stable when mouseout/leave

Question

Using jQuery (3.5.1) In the below example I have difficulties with having the script being stable when mouse leaves the TR, the issue is that the hovering text and icon animation sometimes stays in the TD and are not reset to the $originalText.

Initiallly I made the jQuery global using classes in the hover instead of ID, and I had global class for the .html, and I have tried building it with mouseout and mouseleave but these efforts where more unstable than having a script per TR - yes, I know it ain´t pretty .. unfortunately, as you can see in the below code and snippet it does not work great, it initially does reset the hovering text to $originalText, but if you move over it multiple times or fast it will not reset the state back to original.

Can anyone see what the issue is, and how I can fix it?

My code

var id = 315

$('#tr_user_tasksIT' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanIT' + id).html();
    $('.TaskTextSpanIT' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanIT' + id).html($originalText);
  }
);

$('#tr_user_tasksIT_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanIT' + id).html();
    $('.TaskTextSpanIT' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanIT' + id).html($originalText);
  }
);

$('#tr_user_tasksCFO' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanCFO' + id).html();
    $('.TaskTextSpanCFO' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanCFO' + id).html($originalText);
  }
);

$('#tr_user_tasksCFO_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanCFO' + id).html();
    $('.TaskTextSpanCFO' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanCFO' + id).html($originalText);
  }
);

$('#tr_user_tasksEconomy' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanEconomy' + id).html();
    $('.TaskTextSpanEconomy' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanEconomy' + id).html($originalText);
  }
);

$('#tr_user_tasksEconomy_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanEconomy' + id).html();
    $('.TaskTextSpanEconomy' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanEconomy' + id).html($originalText);
  }
);

$('#tr_user_tasksAcademy' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanAcademy' + id).html();
    $('.TaskTextSpanAcademy' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanAcademy' + id).html($originalText);
  }
);

$('#tr_user_tasksAcademy_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanAcademy' + id).html();
    $('.TaskTextSpanAcademy' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanAcademy' + id).html($originalText);
  }
);

$('#tr_user_tasksPublicator' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanPublicator' + id).html();
    $('.TaskTextSpanPublicator' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanPublicator' + id).html($originalText);
  }
);

$('#tr_user_tasksPublicator_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanPublicator' + id).html();
    $('.TaskTextSpanPublicator' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanPublicator' + id).html($originalText);
  }
);

$('#tr_user_tasksBogportal' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanBogportal' + id).html();
    $('.TaskTextSpanBogportal' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanBogportal' + id).html($originalText);
  }
);

$('#tr_user_tasksBogportal_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanBogportal' + id).html();
    $('.TaskTextSpanBogportal' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanBogportal' + id).html($originalText);
  }
);

$('#tr_user_tasksWelcomePackage' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanWelcomePackage' + id).html();
    $('.TaskTextSpanWelcomePackage' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanWelcomePackage' + id).html($originalText);
  }
);

$('#tr_user_tasksWelcomePackage_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanWelcomePackage' + id).html();
    $('.TaskTextSpanWelcomePackage' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanWelcomePackage' + id).html($originalText);
  }
);

$('#tr_user_tasksKeyCardDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanKeyCardDone' + id).html();
    $('.TaskTextSpanKeyCardDone' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanKeyCardDone' + id).html($originalText);
  }
);

$('#tr_user_tasksKeyCardDone_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanKeyCardDone' + id).html();
    $('.TaskTextSpanKeyCardDone' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanKeyCardDone' + id).html($originalText);
  }
);

$('#tr_user_tasksPortraitDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanPortraitDone' + id).html();
    $('.TaskTextSpanPortraitDone' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanPortraitDone' + id).html($originalText);
  }
);

$('#tr_user_tasksPortraitDone_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanPortraitDone' + id).html();
    $('.TaskTextSpanPortraitDone' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanPortraitDone' + id).html($originalText);
  }
);

$('#tr_user_tasksWhoIsWhoDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanWhoIsWhoDone' + id).html();
    $('.TaskTextSpanWhoIsWhoDone' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanWhoIsWhoDone' + id).html($originalText);
  }
);

$('#tr_user_tasksWhoIsWhoDone_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanWhoIsWhoDone' + id).html();
    $('.TaskTextSpanWhoIsWhoDone' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanWhoIsWhoDone' + id).html($originalText);
  }
);

$('#tr_user_tasksAGR' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanAGR' + id).html();
    $('.TaskTextSpanAGR' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanAGR' + id).html($originalText);
  }
);

$('#tr_user_tasksAGR_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanAGR' + id).html();
    $('.TaskTextSpanWhoIsAGR' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanAGR' + id).html($originalText);
  }
);

$('#tr_user_taskseTrack' + id).hover(
  function() {
    $originalText = $('.TaskTextSpaneTrack' + id).html();
    $('.TaskTextSpaneTrack' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpaneTrack' + id).html($originalText);
  }
);

$('#tr_user_taskseTrack_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpaneTrack' + id).html();
    $('.TaskTextSpanWhoIseTrack' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpaneTrack' + id).html($originalText);
  }
);

$('#tr_user_tasksPhone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanPhone' + id).html();
    $('.TaskTextSpanPhone' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanPhone' + id).html($originalText);
  }
);

$('#tr_user_tasksPhone_NotDone' + id).hover(
  function() {
    $originalText = $('.TaskTextSpanPhone' + id).html();
    $('.TaskTextSpanPhone' + id).html('CLICK AND SOLVE TASK ');
  },
  function() {
    $('.TaskTextSpanPhone' + id).html($originalText);
  }
);

.tr_user_tasks:hover {
  background: #e9ecef;
}

.hand_user_tasks {
  cursor: pointer;
}

.arrowbounce {
  position: absolute;
  width: 50px;
  right: 10px;
  margin: 5px;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}

@-webkit-keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.hourglass-small {
  font-size: .2em;
}

.hourglass {
  width: 3.5em;
  height: 5em;
  border-style: solid;
  border-width: 2.5em 1.2em;
  border-color: #ffc107 transparent;
  border-radius: 10%;
  position: relative;
  animation: spin 5s linear infinite;
}

.hourglass:before {
  content: "";
  width: 2.5em;
  height: 4.5em;
  border-style: solid;
  border-width: 2.25em 1.1em;
  border-color: white transparent transparent;
  border-radius: 10%;
  position: absolute;
  top: -2.25em;
  left: -.7em;
  animation: slideOut 5s linear infinite;
  box-sizing: border-box;
}

.hourglass:after {
  content: "";
  width: 2.5em;
  height: 4.5em;
  border-style: solid;
  border-width: 0em 1.1em;
  border-color: transparent transparent white;
  border-radius: 10%;
  position: absolute;
  top: -2.25em;
  left: -.7em;
  animation: slideIn 5s linear infinite;
  color: #ffc107;
}

@keyframes spin {
  0% {
    transform: rotation(0deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes slideOut {
  0% {
    top: -2.25em;
    width: 2.5;
    border-width: 2.25em 1.1em;
  }
  90% {
    top: 0em;
    width: 0;
    border-width: 0em 0em;
    left: .55em;
  }
  100% {
    top: 0em;
    width: 0;
    border-width: 0em 0em;
    left: .55em;
  }
}

@keyframes slideIn {
  0% {
    border-width: 0em 1.1em;
  }
  90% {
    border-width: 2.25em 1.1em;
  }
  100% {
    border-width: 2.25em 1.1em;
  }
}

.fa-beat {
  animation: fa-beat 5s ease infinite;
}

@keyframes fa-beat {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.5);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.5);
  }
  70% {
    transform: scale(1);
  }
}

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}






  
    
      
        
          T
        
      
    
    Some Name
    28-05-2021
    40,00 %
    

      

        

          
            40,00%
          

          

            
              
              
                
                  Dep1 - Info received - awaits you
                
              
            

            
              
              
                
                  Dep2 - Finished d. 05-05-2021
                  
              
            

            
              
              
                
                  Dep 3 - Adviced 05-05-2021 - awaits you
                
              
            

            
              
                
              
              
                
                  Dep3 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep4 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep5 - Not yet Adviced - awaits Some Person
                
              
            

            
              
              
                
                  Dep6 - Adviced 05-05-2021 - awaits you
                
              
            

            
              
              
                
                  Dep7 - Finished d. 05-05-2021
                
              
            

            
              
              
                
                  Dep8 - Adviced 05-05-2021 - awaits you
                
              
            

            
              
                
              
              
                
                  Dep9 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep10 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep11 - Not yet Adviced - awaits Some Person
                
              
            

            
              
              
                
                  Dep12 - Adviced 05-05-2021 - awaits you

UPDATE : Current jQuery:

$(document).ready(function(){

    var id = <%=objFlowNotDoneMainPage("ID")%>
    
    $( '#tr_user_tasksIT' + id ).hover(
    function() {
        $originalText['.TaskTextSpanIT' + id] = $( '.TaskTextSpanIT' + id ).html();
        $( '.TaskTextSpanIT' + id ).html('KLIK FOR AT GÅ TIL DEN LØSTE OPGAVE ');
    }, function() {
        $( '.TaskTextSpanIT' + id ).html( $originalText['.TaskTextSpanIT' + id] );
    }
    );

    $( '#tr_user_tasksIT_NotDone' + id ).hover(
    function() {
        $originalText['.TaskTextSpanIT' + id] = $( '.TaskTextSpanIT' + id ).html();
        $( '.TaskTextSpanIT' + id ).html('GÅ TIL OPGAVEN OG MARKERE DEN SOM LØST ');
    }, function() {
        $( '.TaskTextSpanIT' + id ).html( $originalText['.TaskTextSpanIT' + id] );
    }
    );

});

I i.e tried toadd the check like this:

}, function() {
   if((originalText['.TaskTextSpanIT' + id] || "") === "") originalText['.TaskTextSpanIT' + id] = newText
   $( '.TaskTextSpanIT' + id ).html( newText );
}

Which does not work

fdomn-m · Accepted Answer

The original issue was that $originalText was a single variable that changed for each row, but the order of events can't be guaranteed.

So one element's hover-on will set a new value for originalText before the next element's hover-off has a chance to reset the value.

One option is to store the originalText as an array, based on the element's ID.

There are two parts:

setup a variable

var originalText = [];

this was previously implied (created automatically) but is required for an array.

set the value for each element

originalText['.TaskTextSpanIT' + id] = $('.TaskTextSpanIT' + id).html();

This can be extended to reduce the need to re-call .html() (and potentially get the updated html instead of the original html)

originalText['.TaskTextSpanIT' + id] = originalText['.TaskTextSpanIT' + id] || $('.TaskTextSpanIT' + id).html();

(note, newer versions of javascript also have ||= and ??= which can be used instead of x=x||y)

Updating your snippet, I also now see that you have two elements hover, which both change the same element, so I've combined these to a single event handler.

A better option might be to include both bits of html in the code and simply .toggle() them.

var id = 315

var originalText = [];

$('#tr_user_tasksIT' + id + ',#tr_user_tasksIT_NotDone' + id).hover(
  function() {
    originalText['.TaskTextSpanIT' + id] = originalText['.TaskTextSpanIT' + id] || $('.TaskTextSpanIT' + id).html();
    $('.TaskTextSpanIT' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanIT' + id).html(originalText['.TaskTextSpanIT' + id]);
  }
);

$('#tr_user_tasksCFO' + id + ',#tr_user_tasksCFO_NotDone' + id).hover(
  function() {
    originalText['.TaskTextSpanCFO' + id] = originalText['.TaskTextSpanCFO' + id] || $('.TaskTextSpanCFO' + id).html();
    $('.TaskTextSpanCFO' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanCFO' + id).html(originalText['.TaskTextSpanCFO' + id]);
  }
);

$('#tr_user_tasksEconomy' + id + ',#tr_user_tasksEconomy_NotDone' + id).hover(
  function() {
    originalText['.TaskTextSpanEconomy' + id] = originalText['.TaskTextSpanEconomy' + id] || $('.TaskTextSpanEconomy' + id).html();
    $('.TaskTextSpanEconomy' + id).html('CLICK AND GO TO TASK ');
  },
  function() {
    $('.TaskTextSpanEconomy' + id).html(originalText['.TaskTextSpanEconomy' + id]);
  }
);

.tr_user_tasks:hover {
  background: #e9ecef;
}

.hand_user_tasks {
  cursor: pointer;
}

.arrowbounce {
  position: absolute;
  width: 50px;
  right: 10px;
  margin: 5px;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}

@-webkit-keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.hourglass-small {
  font-size: .2em;
}

.hourglass {
  width: 3.5em;
  height: 5em;
  border-style: solid;
  border-width: 2.5em 1.2em;
  border-color: #ffc107 transparent;
  border-radius: 10%;
  position: relative;
  animation: spin 5s linear infinite;
}

.hourglass:before {
  content: "";
  width: 2.5em;
  height: 4.5em;
  border-style: solid;
  border-width: 2.25em 1.1em;
  border-color: white transparent transparent;
  border-radius: 10%;
  position: absolute;
  top: -2.25em;
  left: -.7em;
  animation: slideOut 5s linear infinite;
  box-sizing: border-box;
}

.hourglass:after {
  content: "";
  width: 2.5em;
  height: 4.5em;
  border-style: solid;
  border-width: 0em 1.1em;
  border-color: transparent transparent white;
  border-radius: 10%;
  position: absolute;
  top: -2.25em;
  left: -.7em;
  animation: slideIn 5s linear infinite;
  color: #ffc107;
}

@keyframes spin {
  0% {
    transform: rotation(0deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes slideOut {
  0% {
    top: -2.25em;
    width: 2.5;
    border-width: 2.25em 1.1em;
  }
  90% {
    top: 0em;
    width: 0;
    border-width: 0em 0em;
    left: .55em;
  }
  100% {
    top: 0em;
    width: 0;
    border-width: 0em 0em;
    left: .55em;
  }
}

@keyframes slideIn {
  0% {
    border-width: 0em 1.1em;
  }
  90% {
    border-width: 2.25em 1.1em;
  }
  100% {
    border-width: 2.25em 1.1em;
  }
}

.fa-beat {
  animation: fa-beat 5s ease infinite;
}

@keyframes fa-beat {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.5);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.5);
  }
  70% {
    transform: scale(1);
  }
}

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}






  
    
      
        
          T
        
      
    
    Some Name
    28-05-2021
    40,00 %
    

      

        

          
            40,00%
          

          

            
              
              
                
                  Dep1 - Info received - awaits you
                
              
            

            
              
              
                
                  Dep2 - Finished d. 05-05-2021
                  
              
            

            
              
              
                
                  Dep 3 - Adviced 05-05-2021 - awaits you
                
              
            

            
              
                
              
              
                
                  Dep3 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep4 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep5 - Not yet Adviced - awaits Some Person
                
              
            

            
              
              
                
                  Dep6 - Adviced 05-05-2021 - awaits you
                
              
            

            
              
              
                
                  Dep7 - Finished d. 05-05-2021
                
              
            

            
              
              
                
                  Dep8 - Adviced 05-05-2021 - awaits you
                
              
            

            
              
                
              
              
                
                  Dep9 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep10 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep11 - Not yet Adviced - awaits Some Person
                
              
            

            
              
              
                
                  Dep12 - Adviced 05-05-2021 - awaits you

You can also substantially reduce the amount of code you need (but I didn't check every bit of text was the same, so shows an idea only)

var id = 315

var originalText = [];

$(".tr_user_tasks").hover(
  function() {
    originalText[this.id] = originalText[this.id] || $(this).find("td:eq(1)>div").html();
    // if this had a different class, it would be easier to find, but class has an id munged
    // :eq() is deprecated, so add a class to the 2nd td
    $(this).find("td:eq(1)>div").html('CLICK AND GO TO TASK ')
  },
  function() {
    $(this).find("td:eq(1)>div").html(originalText[this.id]);
  });

.tr_user_tasks:hover {
  background: #e9ecef;
}

.hand_user_tasks {
  cursor: pointer;
}

.arrowbounce {
  position: absolute;
  width: 50px;
  right: 10px;
  margin: 5px;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}

@-webkit-keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.hourglass-small {
  font-size: .2em;
}

.hourglass {
  width: 3.5em;
  height: 5em;
  border-style: solid;
  border-width: 2.5em 1.2em;
  border-color: #ffc107 transparent;
  border-radius: 10%;
  position: relative;
  animation: spin 5s linear infinite;
}

.hourglass:before {
  content: "";
  width: 2.5em;
  height: 4.5em;
  border-style: solid;
  border-width: 2.25em 1.1em;
  border-color: white transparent transparent;
  border-radius: 10%;
  position: absolute;
  top: -2.25em;
  left: -.7em;
  animation: slideOut 5s linear infinite;
  box-sizing: border-box;
}

.hourglass:after {
  content: "";
  width: 2.5em;
  height: 4.5em;
  border-style: solid;
  border-width: 0em 1.1em;
  border-color: transparent transparent white;
  border-radius: 10%;
  position: absolute;
  top: -2.25em;
  left: -.7em;
  animation: slideIn 5s linear infinite;
  color: #ffc107;
}

@keyframes spin {
  0% {
    transform: rotation(0deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes slideOut {
  0% {
    top: -2.25em;
    width: 2.5;
    border-width: 2.25em 1.1em;
  }
  90% {
    top: 0em;
    width: 0;
    border-width: 0em 0em;
    left: .55em;
  }
  100% {
    top: 0em;
    width: 0;
    border-width: 0em 0em;
    left: .55em;
  }
}

@keyframes slideIn {
  0% {
    border-width: 0em 1.1em;
  }
  90% {
    border-width: 2.25em 1.1em;
  }
  100% {
    border-width: 2.25em 1.1em;
  }
}

.fa-beat {
  animation: fa-beat 5s ease infinite;
}

@keyframes fa-beat {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.5);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.5);
  }
  70% {
    transform: scale(1);
  }
}

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}






  
    
      
        
          T
        
      
    
    Some Name
    28-05-2021
    40,00 %
    

      

        

          
            40,00%
          

          

            
              
              
                
                  Dep1 - Info received - awaits you
                
              
            

            
              
              
                
                  Dep2 - Finished d. 05-05-2021
                  
              
            

            
              
              
                
                  Dep 3 - Adviced 05-05-2021 - awaits you
                
              
            

            
              
                
              
              
                
                  Dep3 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep4 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep5 - Not yet Adviced - awaits Some Person
                
              
            

            
              
              
                
                  Dep6 - Adviced 05-05-2021 - awaits you
                
              
            

            
              
              
                
                  Dep7 - Finished d. 05-05-2021
                
              
            

            
              
              
                
                  Dep8 - Adviced 05-05-2021 - awaits you
                
              
            

            
              
                
              
              
                
                  Dep9 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep10 - Not yet Adviced - awaits Some Person
                
              
            

            
              
                
              
              
                
                  Dep11 - Not yet Adviced - awaits Some Person
                
              
            

            
              
              
                
                  Dep12 - Adviced 05-05-2021 - awaits you

How to get jQuery Hover to be stable when mouseout/leave

Answers (1)

Related Questions