我怎样才能摆脱悬停时图像中的故障（Css3悬停效果）

Question

这是我网站的网址：Website

你可以看到主页上有一个主要的黄色图像。实际上有11张图片。我在鼠标悬停时展示它们。在悬停图像时，顶部图像隐藏并且底部图像出现，我通过不透明度和 css3 动画来实现平滑过渡。它们几乎没有问题。

1) 当我们将鼠标悬停在图像上时，相应的图像会出现故障。 （图像变得有点大而不是变小。它主要出现在 chrome 中。此外，在非常高的分辨率下，所有图像对齐也会受到干扰。故障仅出现在图像 3

2) 我想在 1280*780 或 2280*1600 等的所有屏幕上将我的页面显示为黄色图像。

Answer 1

“故障”是因为您的 img 在应用 CSS 后没有完全相同的边距。您的黄色part1 有 5 个主要部分。您将每个定义为width:20%，这最终是根据窗口宽度的流体大小，但是您在某些图像的顶部添加了 2px / 3px 的绝对边距，这与您的窗口大小无关。

您不应该这样做，因为20% 可能会计算出不同的像素值 - 在宽度为 1000 像素的窗口中为 200 像素，在宽度为 1024 像素的窗口中为 204 像素。因此，您的 img 高度也会在不同的窗口大小下有所不同。您的 2px / 3px 上边距仅适用于非常特定的窗口宽度，并且不适用于大多数其他分辨率。请记住，所有内容最终都会呈现为 px。

查看您的源代码，您在 HTML 和 CSS 中还有很多其他问题。

1) 您正在为您的图片使用<img> 标签。您的#bottom 图像嵌套在<p> 中，并且样式为<p> 的width: 20%，您的#top 图像的样式为其父copy1 - copy5 的100%。因为它们依赖于不同的父对象，所以跟踪每个父对象和每个图像的位置、边距、填充是乏味和累人的。当您希望精确叠加事物时，请尽量保持一致并使其更可预测。

2) 多个标签具有相同的id 是不合法的，例如#bottom.

你可以/应该做什么：

1. 重做图像（Photoshop 或其他），确保它们完全对齐，无需 CSS 边距。

2. 完成 1 后，重做 HTML 和 CSS 以使其更好/合法。我还鼓励您使用inline-block 而不是浮动。此处的示例（我已使类名尽可能接近您的名称，并保留使用<img> 来实现此效果）：

.parts1 {
  position: relative;
  width: 100%; 
 }

.copy {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 20%;
 }
.top {
  position: absolute;
  width: 100%;
  opacity: 0;
 }
.bottom {
  position: absolute;
  width: 100%;
 }
.copy:hover > .top {
    opacity: 1;
    transition: opacity 1s ease-in-out 0s;
  }

<div class="parts1">
    <div class="copy" id="copy1">
        <img class="bottom" alt="Bottom1" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/plain1.png" />
        <img class="top" alt="Top1" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U2.png" />
    </div><div class="copy" id="copy2">
         <img class="bottom" alt="Bottom2" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U4.png" />
        <img class="top" alt="Top2" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U3.png" />
    </div><div class="copy" id="copy3">
         <img class="bottom" alt="Bottom3" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U5.png" />
        <img class="top" alt="Top3" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U6.png" />
    </div><div class="copy" id="copy4">
         <img class="bottom" alt="Bottom4" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U7.png" />
        <img class="top" alt="Top4" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U8.png" />
    </div><div class="copy" id="copy5">
         <img class="bottom" alt="Bottom5" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U9.png" />
        <img class="top" alt="Top5" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U10.png" />
    </div>
</div>

如果您已正确执行此操作，则实际窗口大小并不重要。它将扩展到所有尺寸。