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

Question

我发现这个有用的 html 可以回答 renocor ( rollover a text hyperlink to become an image) 关于翻转图像到文本的问题

<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 代替图像，对我有用。

.changeable:hover img
{
display: none;
}