html - 将图像超链接翻转为文本行

Question

我发现这个有用的 html 作为 renocor 将图像翻转为文本的问题的答案（将文本超链接翻转为图像）

<style>
.changeable img
{
  display:none;
}
.changeable:hover span
{
  display:none;
}
.changeable:hover img
{
  display:inline-block;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

但我需要达到相反的效果。所以我用图像反转跨度它部分有效。这意味着我看到的不是图像，而是文本，但问题是图像并没有消失，而是在文本下方移动。

有什么建议么？谢谢

.changeable span
{
    display: none;
}
.changeable:hover image
{
    display: none;
}
.changeable:hover span
{
    display: inline-block;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

Answer 1

检查<style>并放置 img 而不是 image，为我工作。

.changeable:hover img
{
display: none;
}