jquery - 悬停时增加和减少列表中 block 的宽度和高度

Question

我有一个列表，当用户悬停它时，我想在 0.5s 内增加每个 block 的宽度和高度。然后在 0.5s 后再次鼠标移开后减小到默认大小。

我的问题是如何设置 z-index 以在鼠标悬停时将其显示在我列表中其他 block 的前面，然后在鼠标悬停时将其调整为默认大小和位置

这是我的 html 列表:

<div id="twelvetour">
<nav>
  <ul class="row">
     <li class="col-md-2">
         <div  class="twelveeffect">
             <a href="">
               <img class="img-responsive" src="" alt="" />
                <p class="text-center">LOREM IPSUM</p>
              </a>
         </div>

     </li>
     <li class="col-md-2">
        <div class="twelveeffect">
           <a href="">
            <img class="img-responsive" src="" alt="" />
            <p class="text-center">LOREM IPSUM</p>
           </a>
        </div>
    </li>
    <li class="col-md-2">
      <div class="twelveeffect">
         <a href="">
          <img class="img-responsive" src="" alt="" />
          <p class="text-center">LOREM IPSUM</p>
         </a>
      </div>                  
    </li>
 </ul>
</nav>
</div>

这是我的 jquery:

 $("#twelvetour li>div.twelveeffect").hover(
 // Mouse Over
 function () {

  //problem is here
  $("#twelvetour li").css("zIndex",9 );

  $(this).animate({ width: '130%', height: 400 }, 500);
},
// Mouse Out
function () {


  $(this).animate({ width: '100%', height: 250 }, 500);


 });

当我像这样设置 z-index 时我提到了我的问题然后它改变了我的所有列表并且我的悬停 block 溢出再次在它的兄弟后面但我的目标是让它在它的前面.当一个方 block 悬停时对我来说非常重要，它不会影响其他地方。

我尝试了一些方法，其中一些方法在鼠标悬停后会增加但会减少，效果不佳。它在 0.5 秒之前突然落在后面，它的宽度落后于它的兄弟。 我的问题是行中的 block 而不是列中的 block 。

感谢任何帮助谢谢。

Answer 1

尝试使用:

$(this).parent().css("zIndex",9);

代替

$("#twelvetour li").css("zIndex",9);

在你的 js 的第 6 行