使用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/