Question

HTML表格代码：

<tr class="tr2">
<td class="td-center addonstitle">Addon Title</td>
<td class="td-center addonsdescription">Description</td>
<td class="td-center addonsauthor">Author</td>
<td class="td-center addonsscreenshot"><div class="hover_img"><a href="#">Show Image<span><img src="imagelink" alt="image"></a></div></td>
</tr>

CSS：

.hover_img a { 
position:relative; 
}

.hover_img a span { 
position:absolute; 
display:none; 
z-index:99; 
}

.hover_img a:hover span { 
display:block; 
}

目前，当您将鼠标悬停在“显示图片”上时，图片会显示。链接，但它减少到桌子的大小（所以几乎隐藏）但是我希望它显示当你将鼠标悬停在＆＃39;显示图像时的完整图像大小。

我尝试过设置宽度/高度＆amp;溢出：a：hover span CSS可见，但图像继续只显示在表下的大小。这里显示的问题是：https://i.imgur.com/YxK0Npb（红色圆圈部分）（悬停的原始图像：https://i.imgur.com/sSKurPk.jpg） - 它应该在悬停时显示完整的图像sSKurPk ..而不是显示的小电流部分。

编辑：必须删除HTML代码中的链接 - ＆＃34; imagelink＆＃34;指向https://i.imgur.com/sSKurPk.jpg

的链接

Answer 1

有类似的东西吗？

img {
    max-width: 100%;
}

这可以防止图像溢出/变大。

悬停在表格内的图片未显示完整图片尺寸

1 个答案: