Javascript 一个标签，显示带过渡的悬停图像

我试图在

a

标签的悬停处显示一个图像，我已经完成并完全工作了，现在我面临一个问题

我希望图像在悬停时“淡入淡出”页面，而不仅仅是为了给它一个更令人满意的完成

我现在的代码是

a.top-row:hover:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
z-index: 10;
top: -295px;
left: -30px; }

为了显示图像，我对每个a标签都有单独的id，所以是这样做的

a#a1:hover:after {
content: url(../images/cars/audi/a1.png); }

HTML-

 <a class="top-row" id="a1">A1</a>

A1

像这样吗？（背景固定，设置不透明度动画）

a.顶行{
位置：相对位置；
}
a、 第一排：之后{
过渡：.5s；
-webkit转换：.5s；
-moz转变：.5s；
显示：块；
位置：绝对位置；
最高：100%；
左：100%；
z指数：10；
宽度：70px；
高度：50px；
不透明度：0；
内容：''；
指针事件：无；
}
#a1:之后{
背景：url(https://placehold.it/70x50);
}
#r8：之后{
背景：url(https://placehold.it/70x50/ff00ff);
}
a、 顶行：悬停：之后{
不透明度：1；
}

A1

R8

仅使用CSS使图像淡入只会使其变得复杂。相反，您可以使用jQuery fadeIn（）和fadeOut（）方法来实现相同的功能

HTML

CSS

---

像那样是的，但是图像是不同的，取决于id，就像我有#a2，这将是一个不同的图像，如此等等，fourthI添加了另一个带有不同悬停图像的

标记。我注意到的唯一问题是，设置的是高度和宽度，这意味着当悬停在一个不是a标记但图片所在的位置时，它会显示出来。还有什么方法可以抵消这种方法吗？我添加了

指针事件：无在伪元素上，它似乎做到了这一点。
<div>
<a link="" id="showme">abcd</a>
<img src="image.jpg" height="200" width="300" alt="button" id="btn">
</div>

$('#showme').hover(
function() {
    $('#btn').fadeIn('slow');
},function() {
    $('#btn').fadeOut('slow');
});

div {
width:305px;
height:229px;
}
#btn {
display:none;
}