我需要使用网页上的爬网文本来实现淡入淡出效果。示例：http : //www.believein.co.uk/在主页的此示例中，我们看到将鼠标悬停在图像上然后图像淡出和文本从顶部爬升时，我们会看到它们。我所有的想象是：
<div class="row pageTitle2">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 marPadReset">
<img src="~/Content/Images/4.jpg"/>
</div>
</div>
</div>
$(".pageTitle2 img").fadeTo("slow", 1.0);
$(".pageTitle2 img").hover(function () {
$(this).fadeTo("slow", 0.6);
}, function () {
$(this).fadeTo("slow", 1.0);
});
有人帮忙吗？
您可以为此使用CSS3过渡，悬停时需要影响覆盖背景的不透明度和覆盖文本的边距。
例如：
div#overlay_container:hover div#background {
transition: opacity 1s ease-in-out;
opacity: 0.6;
}
上面悬停的叠加层将以0.6“轻松”方式将不透明度更改为。
div#overlay_container:hover div#text {
transition: margin-top 2s ease-in-out, opacity 2s ease-in-out;
opacity: 1;
margin-top: 0px;
}
上述上覆盖的悬停将改变opacity以1和margin-top到0。
您可以在这里看到JSFiddle 。
如果您希望迎合过时的浏览器，则可能需要使用基于Javascript的解决方案。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句