JSFiddle - React, Tailwind, and code Playground

by richlewis14

HTML

<!--Skills holder-->
      <div id="skillsHolder" class="clearfix">
        <!--Skills double-->
      <div class="skillsDouble">
        <ul>
          <li class="redFade">
            <div class="text">Selenium</div>
               <div class="fourStar"></div>
                
          </li>
          <li class="blackFade">
            <div class="text">HTML</div>
            <div class="rate"></div>
              <div class="threeStar"></div>
          </li>
        </ul>
      </div>

CSS

#skillsHolder{
  margin-top:40px;
  margin-right:-19px;
}

.skillsDouble{
  
  float:left;
  margin-right:1px;
}

.skillsDouble li.redFade {
  
    background: #333333;
    display: block;
    font-weight: bold;
    padding: 11px 16px;
    text-align: center;
    width: 81px;
    height:20px;

}

.skillsDouble li.blackFade {
  
    background: #BF342B;
    display: block;
    font-weight: bold;
    padding: 11px 16px;
    text-align: center;
    width: 81px;
    height:20px;
}


.skillsDouble li.redFade:hover, .skillsDouble li.blackFade:hover {
    
    cursor: pointer;
    
}

.skillsDouble li + li {
  
  background:#BF342B;
}

.twoStar {
   background:url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png');
   height:20px;
   width:40px;
   text-align:center;
   display:none;

}

.threeStar {
    background:url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png');
    height:20px;
    display:none;
    width:60px;
    text-align:center;
}


.fourStar {
    background:url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png');
    height:20px;
    display:none;
}

JavaScript

$('.skillsDouble li').hover(function () {
      var currenttxt = $(this).children()[0].innerHTML;  
      if(currenttxt === 'Selenium')  {
           $(this).find('.text').stop().hide();
           $(this).find('.fourStar').stop().animate({
              left: 400,
              opacity: "show"
           }, 1500);
          }

    else if (currenttxt === 'HTML') {
           $(this).find('.text').stop().hide();
           $(this).find('.threeStar').stop().animate({
              left: 400,
              opacity: "show"
           }, 1500);
      }

      else {
        $(this).find('.text').stop().hide();
           $(this).find('.twoStar').stop().animate({
              left: 400,
              opacity: "show"
           }, 1500);
            
          }


   
}, function () {
    $(this).find('.fourStar').stop().hide();
    $(this).find('.threeStar').stop().hide();
    $(this).find('.text').stop().fadeIn(1000);
});