CSS图像交换悬停跳转带边框

Question

一点背景。我搜索并搜索过。在悬停时添加边框有很多答案，但是无论是否悬停，我都没有找到表格具有1px白色边框样式的答案。图像在悬停时跳转。我尝试了box-sizing: border-box并为悬停样式添加了相同的颜色边框。这个网站很旧，我不是原来的开发者。它是使用表而不是div构建的。我们正在将它们转换到新的网站，但他们希望这个新网站同时更新。一个黑色和白色和另一种颜色。当你将鼠标悬停在黑白上时，他们希望它变成一种颜色。我们使用400px（w）到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;解决了问题。