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

Question

这里是新人。我正在建立一个网站，并在这个网站上显示重叠的图像。因此，我在悬停时使用 z-index，以便在悬停时后面的图像出现。但是，我也在使用 Bootstrap 和 img-responsive 标签，当我悬停时，图像会闪烁然后消失。我怎样才能解决这个问题？是否可以只用 HTML/CSS 而不用 Java 来处理这个问题？

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

<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>

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