javascript - 悬停时显示带有过渡效果的图像的标签

Question

我正在尝试在 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>

Answer 1

像这样？ (背景固定，动画不透明度)

a.top-row {
  position: relative;
}

a.top-row:after {
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  
  display: block;
  position: absolute;
  top: 100%;
  left: 100%;
  z-index: 10;
  width: 70px;
  height: 50px;  
  opacity: 0;
  content: ' ';
  pointer-events: none;
}
#a1:after {
  background: url(https://placehold.it/70x50);
}
#r8:after {
  background: url(https://placehold.it/70x50/ff00ff);
}

a.top-row:hover:after {
  opacity: 1;  
}

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