Question

JSFiddle Here：https://jsfiddle.net/br84z1Lj/

在悬停时，两个图像都交换，而不是只交换一个。如果我结束“swapMe”的div并为下一个图像重新启动它，它会将下一个图像放在下一行，而不是保持一致。我完全坚持只在悬停时只改变一张图像而不是两者！

CSS

@charset "utf-8";

/* CSS Document */

#thumbs {
  width: 460px;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

#thumbs a {
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.swapMe img {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.swap1,
.swapMe:hover .swap2 {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.swapMe:hover .swap1,
.swap2 {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}

HTML

<body>

  <div id="thumbs">
    <div class="swapMe">

      <a id="single_image1" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" />
        <img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2">
      </a>

      <a id="single_image2" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" />
        <img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2">
      </a>



      <span class="stretch"></span>

    </div>
  </div>


</body>

</html>

Answer 1

您需要将2张图片包装在单独的div中。您可以使用display: inline-block

我更新了你的小提琴。 https://jsfiddle.net/br84z1Lj/1/

<强> CSS

@charset "utf-8";

/* CSS Document */

#thumbs {
  width: 460px;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

#thumbs a {
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}
.swapMe {
  display: inline-block;
}    
.swapMe img {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.swap1,
.swapMe:hover .swap2 {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.swapMe:hover .swap1,
.swap2 {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}

<强> HTML

<body>

  <div id="thumbs">
    <div class="swapMe">

      <a id="single_image1" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" />
        <img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2">
      </a>
    </div>
    <div class="swapMe">
      <a id="single_image2" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" />
        <img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2">
      </a>
    </div>


    <span class="stretch"></span>

  </div>


</body>

</html>

Answer 2

请尝试使用此css代码：

<div></div>

Answer 3

如果我理解你在寻找什么，那么修改你的底部悬停声明应该可以解决这个问题！旁注，前缀不透明声明在这一点上并不是必需的，我能想到的任何版本中的每个现代浏览器都支持普通的不透明度。

.swap1:hover,
.swap2:hover {
  opacity: 0;
}

https://jsfiddle.net/will0220/awpv02p7/

CSS图像一次交换一个

3 个答案: