在带有过渡的悬停上显示图像的标签

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> 

Answer 2

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

的HTML

<div>
<a link="" id="showme">abcd</a>
<img src="image.jpg" height="200" width="300" alt="button" id="btn">
</div>

jQuery的

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

的CSS

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