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

Question

我目前正在进行一个项目，我希望在悬停的列表项旁边弹出气泡。每个对话气泡都有与悬停在上面的特定项目有关的信息。为了让每个带有正确信息的对话气泡出现在正确的项目旁边，我创建了 6 个不同的 .move（.move1、.move2、.move3. 等）类，每个类都为每种对话气泡设置了不同的位置.这是我正在谈论的jsfiddle：

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 和 mouseleave）

另外，既然您使用的是 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/