使用jQuery为列表元素创建悬停状态

我目前正在研究一个项目，我希望语音气泡弹出旁边的列表项目正在悬停。每个语音气泡都有与悬停在上面的特定项目相关的信息。为了让每个语音气泡与正确的信息显示在正确的项目旁边，我创建了6个不同的.move()。动一，动二，动三。等)类，每个类都有不同的位置设置为每种情况下的语音气泡。下面是我所谈论的内容的概要:

https://jsfiddle.net/sLemf2z0/1/

你可以看到我正在尝试创建一个循环，将正确的。move类应用于正确的列表项，但目前它不工作。我该如何让我的。move类应用到正确的列表项悬停与javascript/jquery循环?

这是我的html, css和javascript以外的jsfiddle:

HTML

<ul class="grid1Ul">
          <li>&nbsp;Arthritis
              <ul class="clearfix ">
                 <li class="subLi">Arthritis is not good for you.</li>   
              </ul>
          </li>
          <li>Back &amp; Neck Pain
              <ul class="clearfix ">
                 <li class="subLi">Neck Pain is not awesome at all</li>   
              </ul>
          </li>
          <li>&nbsp;&nbsp;&nbsp;Muscle Strains/Sprains
              <ul class="clearfix ">
                 <li class="subLi">Muscle strins is not awesome at all</li>   
              </ul>
          </li>
          <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sport/Auto/Work Injuries
              <ul class="clearfix">
                 <li class="subLi">Sports and Auto injuries are definitely not awesome</li>   
              </ul>
          </li>
          <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Orthopedic Post Surgical
              <ul class="clearfix">
                 <li class="subLi ">Surgery is not very awesome either</li>   
              </ul>
          </li>
          <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Gait and Balance Training
              <ul class="clearfix">
                 <li class="subLi">gait and balance training is awesome!!!!!!</li>   
              </ul>
          </li>
 </ul>

CSS

.grid1Ul {
    color: #982304;
    font: italic 700 35px / 48px Arial;
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.32);
    list-style-type: none;
    position: absolute;
    top: 391px;
    left: 121px;
    line-height: 1.7em;
    z-index: 3;
}
.gridUl li {
   position: relative;
}
.subLi {
   list-style-type: none;   
}
.grid1Ul li ul {
    position: absolute;
    left: -9000px;
    font-size: .4em;
    width: 300px;
    line-height: 1.5em;
    text-shadow: none;
    color: black;
    width: 600px;
    height: 100px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 20px;
    padding: 20px 20px 0 20px;
    box-shadow: 5px 5px 10px lightgrey;
}
li ul.move1 {
   bottom: 350px;
   left: 140px;
}
li ul.move2 {
   bottom: 290px;
   left: 290px;
}
li ul.move3 {
   bottom: 230px;
   left: 410px;
}
li ul.move4 {
   bottom: 170px;
   left: 470px;
}
li ul.move5 {
   bottom: 110px;
   left: 520px;
}   
li ul.move6 {
   bottom: 50px;
   left: 575px;
}

.grid1Ul li ul:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 20px;
    top: 120px;
    border: 10px solid;
    border-color: #666 transparent transparent #666;
}
.grid1Ul li ul:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 21px;
    top: 120px;
    border: 9px solid;
    border-color: #fff transparent transparent #fff;
}

Jquery Javascript/

 for(i = 1; i < 7; i++) {
        var numString = "" + i;
       $(".grid1Ul li:nth-of-type(" + numString + ")").hover( function() {
           $(this).children().toggleClass("move" + numString);   
       });
    }

//each gives us index to utilize
$('.grid1Ul > li').each( function( index ) {
    $(this).hover( function() {
        //index is 0 - based, so we add one
        $( this ).children().addClass( "move" + ( index + 1 ) );
    }, function() {
        $( this ).children().removeClass( "move" + ( index + 1 ) );
    });
});