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

Question

我目前正在一个项目中，我希望在悬停的列表项旁边弹出气泡。 每个气泡都有与所悬停的特定项目有关的信息。 为了使每个带有正确信息的气泡出现在正确的项目旁边，我创建了6个不同的.move（.move1，.move2，.move3等）类，每个类针对每种情况都设置了不同的位置。 这是我正在谈论的内容：

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

您可以看到我正在尝试创建一个循环，该循环将正确的.move类应用于正在悬停的正确列表项，但当前无法正常工作。 我该如何通过JavaScript / jquery循环将.move类应用于正确的列表项徘徊？

这是我在jsfiddle之外的html，css和javascript：

的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;
}

Javascript / jQuery

 for(i = 1; i < 7; i++) {

        var numString = "" + i;

       $(".grid1Ul li:nth-of-type(" + numString + ")").hover( function() {
           $(this).children().toggleClass("move" + numString);   
       });

    }

Answer 1

jQuery的.hover()有两个参数，handlerIn和handlerOut（ 的mouseenter和鼠标离开 ）

另外，由于您使用的是jQuery，为什么不使用.each()而不是for()循环呢？

就像是：

//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 ) );
    });
});

https://jsfiddle.net/Camwyn/ssduqd5f/