如何在鼠标悬停时将图像定位在其他图像之上？

Question

我试图找到任何解决方案，但我找不到。我有一些图片，每个图片都在 other.I 上，希望当我将鼠标悬停在第一张图片上时，后面的图片将位于第一张图片上方。例如：

正常：鼠标悬停：

基本上第二张和第三张图在第一张图后面。对不起我的英语，提前谢谢！

Answer 1

您可以将 jQuery 的 hover 事件函数与 over 和 out 处理程序一起使用..

从 "behind" 第一个框的框开始 - 隐藏它们。
接下来定义一个 onhover 事件以在鼠标悬停时显示它们，并在鼠标悬停时再次隐藏它们。

$('#1').hover(
  function(){
    $('.hidden').removeClass('hidden').addClass('visible');
  },
  function(){
    $('.visible').removeClass('visible').addClass('hidden');
  }
)

.box {
  border: solid 2px black;
  width: 40px;
  height: 40px;
}

.hidden {
  visibility: hidden;
}

.visible {
  visibility: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="3" class="box hidden">3</div>
<div id="2" class="box hidden">2</div>
<div id="1" class="box">1</div>

Answer 2

此解决方案要求盒子绝对定位并位于容器中。

var prop = "bottom",
  moveAmount = 50;

$('.container').hover(
  function() {
    var moved = $(this).find(".box");

    for (var i = (moved.length - 1), pad = 0; i >= 0; i--) {
      $(moved[i]).css(prop, (pad++ * moveAmount) + "px");
    }
  },
  function() {
    var moved = $(this).find(".box");
 
    for (var i = 0; i < moved.length; i++) {
      $(moved[i]).css(prop, "0px");
    }
  }
);

.container {
  background-color: #eeeeee;
  position: relative;
  width: 45px;
  height: 45px;
}

.box {
  background: red;
  width: 40px;
  height: 40px;

  transition: bottom 0.3s ease-in-out;
  position: absolute;
    bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br><br><br><br><br><br>

<div class="container">
  <div class="box">3</div>
  <div class="box">2</div>
  <div class="box">1</div>
</div>

如何在鼠标悬停时将图像定位在其他图像之上？

How to position image above other image on mouseover?

javascript

css

angularjs

animation

mouseover