Jquery 悬停时增加或减少列表中块的宽度和高度

我有一个列表，我想在用户悬停时增加

0.5s

中每个块的宽度和高度。然后在

0.5s

中再次鼠标移出后减小到默认大小

我的问题是如何设置

z-index

，在鼠标悬停时将其显示在列表中其他块的前面，然后在鼠标移出时将其调整为默认大小和位置

这是我的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>

正如我在这样设置

z-index

时提到的问题，然后它会更改我的所有列表，我的悬停块溢出位于它的兄弟后面，但我的目标是将它放在它前面。这对我来说非常重要，当一个方块悬停时，它不会影响其他地方

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

谢谢你的帮助，谢谢

尝试使用：

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

而不是

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

在js的第6行

尝试使用：

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

而不是

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

---

在你的js的第6行，我对jquery不太熟悉，但我希望我的回答会有所帮助。我发现用原生CSS制作动画要容易得多

在下面的示例中，当用户将光标从div上移开时，div将在悬停时扩展其宽度并收缩

“transition”属性告诉浏览器设置对元素所做任何更改的动画。所以，一旦我们有了它，我们就可以改变悬停的“宽度”属性，它将为我们很好地设置动画。我们可以用“z指数”做同样的事情

您也可以使用

transform:scale（1.2,1）

增加元素的宽度，而不影响列表中的其他元素

.anAwesomeDiv{
宽度：100px；
颜色：白色；
高度：100px；
背景颜色：蓝色；
过渡：0.5s；
}
.anAwesomeDiv:悬停{
宽度：200px；
z指数：50；
}

看这部电影多棒啊！

我不太熟悉jquery，但我希望我的回答会有所帮助。我发现用原生CSS制作动画要容易得多

在下面的示例中，当用户将光标从div上移开时，div将在悬停时扩展其宽度并收缩

“transition”属性告诉浏览器设置对元素所做任何更改的动画。所以，一旦我们有了它，我们就可以改变悬停的“宽度”属性，它将为我们很好地设置动画。我们可以用“z指数”做同样的事情

您也可以使用

transform:scale（1.2,1）

增加元素的宽度，而不影响列表中的其他元素

.anAwesomeDiv{
宽度：100px；
颜色：白色；
高度：100px；
背景颜色：蓝色；
过渡：0.5s；
}
.anAwesomeDiv:悬停{
宽度：200px；
z指数：50；
}

看这部电影多棒啊！

$（“#twevetour li.tweveeffect”）。悬停(
//滑过
功能（事件）{
//问题就在这里
$（this.parent（）.css（“zIndex”，9）；
$（this.stop（）.animate（{width:'80%'，height:400}，500）；
},
//耗竭
功能（事件）{
$（this）.stop（true，true）.animate（{width:'40%'，height:50}，500）；
event.stopPropagation（）；
event.preventDefault（）；
});
.tweeveEffect{背景：蓝色；颜色：白色；宽度：30%；}










$（“#twevetour li.tweveeffect”）。悬停(
//滑过
功能（事件）{
//问题就在这里
$（this.parent（）.css（“zIndex”，9）；
$（this.stop（）.animate（{width:'80%'，height:400}，500）；
},
//耗竭
功能（事件）{
$（this）.stop（true，true）.animate（{width:'40%'，height:50}，500）；
event.stopPropagation（）；
event.preventDefault（）；
});
.tweeveEffect{背景：蓝色；颜色：白色；宽度：30%；}









也许您可以使用以下内容：


var li=$（'tweevetour li'）；
var liWidth=li.width（）；
var-liLeft=0；
var liMargin=40；
li.每个（函数（）{
$（this.css）({
左：淡紫色+‘px’
});
liLeft=liLeft+liWidth+liMargin；
});
a{
文字装饰：无；
颜色：#555；
字体系列：Arial，Helvetica无衬线字体；
}
/*------------------------------------*/
#十二周{
位置：相对位置；
}
#十二里{
位置：绝对位置；
背景：#e7e7e7；
高度：50px；
溢出：隐藏；
宽度：100px；
溢出：隐藏；
过渡：所有200ms缓解；
填充：15px；
}
#十二周丽萍{
保证金：0；
}
.十二效应{
}
#十二里：悬停{
z指数：3；
填充：30px；
背景：#1755ff；
转换：转换（-15px）；
高度：300px；
}
#十二巡游李：盘旋a{
颜色：白色；
}









也许您可以使用以下内容：


var li=$（'tweevetour li'）；
var liWidth=li.width（）；
var-liLeft=0；
var liMargin=40；
li.每个（函数（）{
$（this.css）({
左：淡紫色+‘px’
});
liLeft=liLeft+liWidth+liMargin；
});
a{
文字装饰：无；
颜色：#555；
字体系列：Arial，Helvetica无衬线字体；
}
/*-------