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

Question

我试图找到任何解决方案，但我找不到。 我有一些图像，每一个都在另一个。我希望当我鼠标悬停在第一个图像时，behnd的图像将在第一个图像上方。 例如：

正常： 鼠标悬停：

在基本情况下，第二张和第三张图像位于第一张图像的后面。 对不起我的英文，并提前致谢！

Answer 1

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

1. 从第一个框“后面”的方框开始 - 隐藏它们。
2. 接下来定义一个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

此解决方案要求将盒子绝对放置在容器中。

＆＃13;

＆＃13;

dplyr

＆＃13;

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");
    }
  }
);

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;