html - 带有边框的悬停跳跃上的 CSS 图像交换

Question

一点背景。我找了又找。在悬停时添加边框有很多答案，但我没有发现表格有 1px 白色边框样式的地方，无论悬停与否。图像在悬停时跳跃。我试过box-sizing: border-box并为悬停样式添加相同颜色的边框。这个网站很旧，我不是最初的开发者。它是使用表格而不是 div 构建的。我们正在将他们转移到一个新站点，但他们希望同时使用新图像更新这个站点。一种是黑白的，另一种是彩色的。当您将鼠标悬停在黑色和白色上时，他们希望它变成彩色的。我们使用的 Sprite 是 400px (w) x 240px (h)。图片高度为 120 像素，因此只需更改悬停效果的位置即可。

HTML
<td class="bottom right left stlouis"></td>

CSS

.stlouis {
    width: 400px;
    height: 120px;
    background-image: url(../images/stlouis.jpg);
    background-position: 0 0;
}

.stlouis:hover {
    background-position: bottom;
}

感谢您的帮助!

Answer 1

如果无论如何都在寻找解决办法，display: block; 解决了这个问题。