Question

我有两张相互重叠的图像。我需要能够在点击它时提出背面图像。

最简单的方法是什么，我还需要确保它可以在移动设备上使用。我正在使用Bootstrap来使事情响应。

Answer 1

你走了：

您需要修复自己的CSS以使其正常工作。

   .imageTwo {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background:red;
    position: absolute;
}

.imageOne {
    width: 100px;
    height: 100px;
    margin-left: 40px;
    position: absolute;
    background: black;
}

Answer 2

如果您在元素中添加tabindex，则可以使用CSS :focus。添加一些小的javascript以便在mouseover上为您的悬停触发它。

$(".image").on("mouseover", function() { $(this).focus(); });

.image {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background:red;
    z-index:1;
    position:absolute;
}
.image:focus {
    z-index:10;
}


.imageOne {
    margin-left: 60px;
    background: black;
}

.imageTwo {
    margin-left: 30px;
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imageOne image click-to-top" tabindex="1"></div>
<div class="imageTwo image click-to-top" tabindex="2"></div>
<div class="imageThree image click-to-top" tabindex="3"></div>

Answer 3

您需要将CSS中的.image位置设置为固定。添加以下内容并将其修复：

position: absolute;

Answer 4

请参阅此文章了解更多详情

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

＆＃13;

$('.imageTwo').click(function() {
  $(this).addClass("opacity");

});
$('.imageOne').click(function() {
  $('.imageTwo').removeClass("opacity");

});

＆＃13;

.image {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background: red;
}
.imageOne {
  margin-left: 40px;
  position: absolute;
  background: black;
}
.opacity {
  opacity: 0.99;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imageOne image click-to-top"></div>
<div class="imageTwo image click-to-top"></div>

＆＃13;

用jquery或css将图像放在另一个前面

4 个答案: