在悬停

Question

我有一个列表，当用户将鼠标悬停在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>

这是我的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时我提到了我的问题然后它改变了我的所有列表，并且我的悬停块溢出再次在它的兄弟后面，但我的目标是让它在它前面。当一个块徘徊时，它对我来说非常重要，它对其他地方没有影响。

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

感谢任何帮助谢谢。

Answer 1

尝试使用：

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

而不是

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

在你的js的第6行

Answer 2

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

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

“transition”属性告诉浏览器动画对元素所做的任何更改。所以一旦我们有了这个，我们就可以在悬停时改变“宽度”属性，它将为我们提供很好的动画效果。我们可以用“z-index”做同样的事情。

您也可以使用transform: scale(1.2, 1);来增加元素的宽度，而不会影响列表中的其他元素。

.anAwesomeDiv {
   width: 100px;
   color: white;
   height: 100px;
   background-color: blue;
   transition: 0.5s;
 }

.anAwesomeDiv:hover {
   width: 200px;
   z-index: 50;
 }

<div class="anAwesomeDiv">
  Look how awesome this div is!
</div>

Answer 3

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

  //problem is here
 $(this).parent().css("zIndex",9);

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


  $(this).stop(true,true).animate({ width: '40%', height: 50 }, 500);
  event.stopPropagation(); 
  event.preventDefault(); 

 });

.twelveeffect {background:blue;color:white;width:30%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>

Answer 4

也许你可以使用这样的东西：

＆＃13;

＆＃13;

var li 		    = $('#twelvetour li');
var liWidth 	= li.width();
var liLeft 		= 0;
var liMargin 	= 40;

li.each(function(){
  $(this).css({
    left : liLeft + 'px'
  });
  liLeft = liLeft + liWidth + liMargin;
});

＆＃13;

a {
  text-decoration: none;
  color: #555;
  font-family: Arial, Helvetica sans-serif;
}

/*------------------------------------*/


#twelvetour {
  position: relative;
}

#twelvetour li {
  position: absolute;
  background: #e7e7e7;
  height: 50px;
  overflow: hidden;
  width: 100px;
  overflow: hidden;
  transition: all 200ms ease;
  padding: 15px;
}

#twelvetour li p {
  margin: 0;
}

.twelveeffect {
  
}

#twelvetour li:hover {
  z-index: 3;
  padding: 30px;
  background: #1755ff;
  transform: translate(-15px);
  height: 300px;
  
}

#twelvetour li:hover a {
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</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 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</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 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
           </a>
        </div>                  
      </li>
   </ul>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;