悬停链接时的图像[HTML+；CSS]

因此，我希望能够有一个链接，当悬停时，显示一个图像。。 到目前为止，我只找到了在图像悬停时更改图像的教程

请问我该怎么做？ 顺便说一句：我对HTML完全是初学者

谢谢

使用和属性

img{
显示：无；
}
a:悬停+img{
显示：块；
}

jqueryforlife

$（'.link'）.mouseover（函数（）{
$（'.dog'）.show（）；
}).mouseleave（函数（）{
$（'.dog'）.hide（）；
})

@导入url（'https://fonts.googleapis.com/css?family=Raleway');
.链接{
高度：40px；
宽度：200px；
边框：1px纯黑；
文本对齐：居中；
边界半径：5px；
边缘底部：10px；
}
a{
文字装饰：无；
颜色：黑色；
字体大小：30px；
字体系列：雷威；
}
.狗{
背景：url（'https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg');
高度：150像素；
宽度：150px；
背景尺寸：封面；
显示：无；
}

---

确实有两种方法可以实现你想要的。如果您是html和css的初学者，最好使用zer00ne代码段。Hover，如果你想深入挖掘，我还有以下解决方案：

你可以在这里测试

HTML

---

欢迎来到StackOverflow！为了让我们帮助您，请尽最大努力创建一个关于您的问题以及您迄今为止试图解决的问题的列表。就目前而言，这个问题对社区没有帮助。哇，真是太好了！非常欢迎，如果这解决了您的问题，请单击绿色复选标记✔ 在这个岗位上。

<a href="#" title="super eye" alt="super eye">
  hover
</a>

a {
  position:relative;
}
a:after {
  content:'';
  display:block;
  width: 200px;
  height: 200px;
  opacity:0;
  background: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg') no-repeat center;
  background-size: cover;
  border-radius:50%;
  position:absolute:
  right:0px;
  top:0px;
    -webkit-transition: all 3s;
    transition: all 3s;
}
a:hover:after {
  opacity: 100;
}