顯示懸停過渡

我想顯示上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>

來源

2017-01-22 cmiotk

是這樣的？（背景固定，動畫不透明度）

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>

來源

2017-01-22 16:01:09 Giladd

一樣，是的，但圖像視ID喜歡我＃A2這將是一個不同的是不同的圖像等等第四 – cmiotk

我添加了另一個''標籤與不同的懸停im年齡 – Giladd

這正是我需要的，謝謝！ – cmiotk

有圖像淡入只使用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; 
}

來源

2017-01-22 16:05:47 Aayush

顯示懸停過渡

回答

相關問題