使用bootstrap img-responsive类悬停时的z-index

Question

纽布在这里。我正在建立一个网站，在这个网站上我显示重叠的图像。因此，我在悬停时使用z-index，以便后方图像在悬停时向前移动。但是，我也使用bootstrap和img-responsive标签，当我悬停时，图像闪烁然后消失。我怎样才能解决这个问题？是否可以仅在HTML / CSS中处理此问题，而不是Java？

＆＃13;

＆＃13;

#container1 {
  position: absolute;
  top: 25%;
  left: 35%;
}
#container1 img:hover {
  z-index: 3;
  position: absolute;
}
#container2 {
  position: absolute;
  top: 30%;
  left: 25%;
}
#container2 img:hover {
  z-index: 2;
  position: absolute;
}
#container3 {
  position: absolute;
  top: 45%;
  left: 40%;
}
#container3 img:hover {
  z-index: 1;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Philesq</a>
    </div>

    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#works">works</a>
        </li>
        <li><a href="#about">about</a>
        </li>
        <li><a href="#contact">contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div id="container">
  <div id="container1">
    <img src="http://placehold.it/300x300?text=1" class="img-responsive">
  </div>
  <div id="container2">
    <img src="http://placehold.it/300x300?text=2" class="img-responsive">
  </div>
  <div id="container3">
    <img src="http://placehold.it/300x300?text=3" class="img-responsive">
  </div>
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我在那里。

图像闪烁的原因是因为您在悬停时将图像设置为绝对位置，并且默认情况下它具有静态位置。

如果您将图像设置为从头开始相对位置，并且还在悬停时删除位置属性，则它将起作用。您不需要在图像上使用绝对位置，因为您在父容器上有它。 （除非你想做更多我不知道的事情）

希望这有帮助:)

Se working example here

#container1 img, #container2 img, #container3 img{
  position: relative; /* Added this */
  border: 1px solid red;
}
#container1 {
  position: absolute;
  top: 25%;
  left: 35%;
}
#container1 img:hover {
  z-index: 3;
  /* Removed: position: absolute; */
}
#container2 {
  position: absolute;
  top: 30%;
  left: 25%;
}
#container2 img:hover {
  z-index: 2;
}
#container3 {
  position: absolute;
  top: 45%;
  left: 40%;
}
#container3 img:hover {
  z-index: 1;
}