Question

我需要在我的网页上使用爬网文本实现淡入淡出效果。示例：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); 
    });

有人帮忙吗？

Answer 1

链接：http://jsfiddle.net/FCpc8/1/

<强> CSS

a { position: relative; display: inline-block }
a span {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: 0;
 background: black;
 color: #fff;
 opacity:0;
 transition:1s;
}

a:hover span {
 opacity:1;
}

<强> HTML

<div class="row pageTitle2">
  <div class="col-md-12">
    <div class="row">
       <div class="col-md-4 marPadReset">
           <a href="#">
               <span>Some Text</span>
            <img src="~/Content/Images/4.jpg"/></a>
        </div>
    </div>
  </div>

<强>解释

首先，您需要将图片包装在anchor标记中，并将要悬停的文字包含在span标记中。默认情况下，opacity文本将为0，即hidden。悬停(a:hover span) opacity设置为1 - visible。并且背景是黑色的，因此背后的图像是不可见的。 Transition property的CSS会帮助它顺利地移动效果。

Answer 2

您可以将jQuery与一些mouseenter和mouseleave效果

一起使用

$(function(){
    $(".bg").mouseenter(function(){
        $(".text").fadeIn(500);
    });

    $(".bg").mouseleave(function(){
        $(".text").slideUp(500);
    });

});

JSFIDDLE

Answer 3

您可以使用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 here。

如果您希望迎合过时的浏览器，您可能需要回归基于Javascript的解决方案。

使用攀爬文本淡化效果

3 个答案: