显示悬停过渡

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

显示悬停过渡

回答

相关问题