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

Question

我目前正在研究一个项目，我希望语音气泡可以在悬停的列表项旁边弹出。每个讲话泡泡都有关于特定项目的信息。为了让每个语音气泡都显示正确的信息旁边的正确的项目，我创建了6个不同的.move（.move1，.move2，.move3。等）类，每个类都为每个语音气泡设置不同的位置。以下是我在谈论的的jsfiddle：

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

使用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() TA KES两个参数，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/