html - 为什么图像在以下情况下没有调整大小？

Question

我有一组三张水平图像。将这些图像中的每一个悬停后，我都会显示工具提示图像。但我面临的问题是我无法调整图像的大小。如果我要减少工具提示图像的高度和宽度，则只显示图像的一部分。实际上整个图像应该在悬停时显示。但它没有发生。有人可以在这方面帮助我吗？

以下是HTML代码:

<table style="width:100%" id="thumbs">
                      <tr>
                        <td><span style="cursor:pointer" id="tooltip1"><img id="img1" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/OpenIcon.png"/></span></td> 
                        <td><span style="cursor:pointer" id="tooltip2"><img id="img2" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/ColsedIcon.png"/></span> </td>
                        <td><span style="cursor:pointer" id="tooltip3"><img id="img3" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/SecretIcon.png"/></span> </td>
                      </tr>
                    </table>

CSS 代码:

tr span {
    display: block;
    position: relative;
}
tr span:hover {
    z-index: 1;
}
tr span:hover:after {
    content:"";
    background-image: url('http://lorempixel.com/273/274/');
    position: absolute;
    top:50%;
    left: 50%;
    width: 273px;
    height: 274px;
} 

有人可以在这方面帮助我吗？

JS Fiddle链接如下: Demo

Answer 1

tr span:hover:after {
    content:"";
    background-image: url('http://lorempixel.com/273/279/');
    position: absolute;
    background-repeat:no-repeat;
    background-size:contain;
    left: 50%;
    width: 100px;
    height: 100px;
}

这样你可以减少工具提示的大小并仍然显示整个图像。