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/

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

1 个答案: