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; }

并显示图像我为每个标签分配了id，所以就像这样做..

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

HTML -

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

Answer 1

喜欢这个？（背景固定，动画不透明）

＆＃13;

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;  
}

＆＃13;

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

＆＃13;

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;
}

标记显示悬停时带有过渡的图像

2 个答案: