CSS 图像一次交换一个

Question

JSFiddle 在这里：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

我更新了你的fiddle。 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 代码：

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

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

Answer 3

将您的底部悬停语句修改为这个应该可以解决问题，如果我理解您要查找的内容！旁注，在这一点上，前缀不透明度声明并不是真正必要的，我能想到的任何版本中的每个现代浏览器都支持普通的旧不透明度。

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

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

CSS 图像一次交换一个

CSS Image Swap One at a Time

css

swap

image