移行

Question

私は作業に完全に完了し、持っているaタグのホバー上の画像を表示しようとしている、今私は問題に直面しています...

Iでホバー上の画像を示すタグそれがより満足のいく仕上がりを与えるために、イメージが単に出現するのではなくむしろぶらされているときに、ページの内外に「フェードアウト」したいと思っています。

分での私のコードは...

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

このようにします。 （背景固定、不透明度をアニメーション）の画像がフェードインのみCSSを使用して持っ

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

は、それが複雑になるだろう。代わりに、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; 
}