jquery - 使一段文本位于顶部

Question

我正在玩的 CSS/jQuery 的想法是，基本上，一个颜色的 div 位于另一个 div 的顶部，然后淡出顶部的链接，以便主 div 后面的颜色在鼠标悬停时显示出来并在您离开 div 后返回主颜色。

我的问题是，基本上我不能将文本放入一个分区并始终将其放在顶部，因为如果将其放置在淡入淡出的 div 中，那么文本显然会淡出，同样，当它位于底部 div 时，它也不会总是出现. 到目前为止，我有这个：

CSS：

    .logo{
        width: 200px;
        height: 100px;
        background-color: #519CC4;
        float: left;
        text-align: center;
    }

    .barofcolour{
        width: 200px;
        height: 100px;
        background-color: #51B9C4;
        float: left;
        position: absolute;
    }

身体：

<div class="logo">
      <!--put text here-->
</div>
<div class="barofcolour">
      <!--or here-->
</div>

jQuery：

    $(document).ready(function(){
        $(".barofcolour").hover(function(){
            $(".barofcolour").fadeTo("1000", 0);
            },function(){
            $(".barofcolour").fadeTo("1000", 1);
        });
    });

因此，如果有人能提供任何关于我如何让一些文本始终位于褪色颜色条和静态颜色条之上的见解。那会很好。

Answer 1

如果你总是想要相同的文本但只是改变背景颜色，你可以使用 CSS 过渡而不是淡化重叠div：

HTML

<div class="logo">
      Text 
</div>​

CSS

.logo{
    width: 200px;
    height: 100px;
    background-color: #519CC4;
    float: left;
    text-align: center;

    transition: background-color 1s;
    -moz-transition: background-color 1s; /* Firefox */
    -webkit-transition: background-color 1s; /* Safari and Chrome */
    -o-transition: background-color 1s; /* Opera */
}
.logo:hover { background-color: #51B9C4; }

​<a href="http://jsfiddle.net/xGBAz/" rel="nofollow">演示

编辑：如果你想使用 jQuery 解决方案，你也可以这样做：

$(document).ready(function(){
    $(".logo").hover(function(){
        $(this).animate({ backgroundColor: '#51B9C4'}, 1000);
        },function(){
        $(this).animate({ backgroundColor: '#519CC4'}, 1000);
    });
});​

请注意，您需要 jQuery UI 或其他一些彩色动画插件（或自己编写一个）。

演示

Answer 2

在透明背景（css3）上使用不透明文本

background-color: rgba(...);

您可以在其中指定背景透明度的 Alpha 通道而不影响文本。如果你想为 rgba 背景设置动画，我推荐在https://github.com/jquery/jquery-color/

Answer 3

这可能有点笨拙，但我在途中感到困惑。给你：HTML

<div class="wrapper">

<div class="logo">
      <!--put text here--> </div> <div class="barofcolour">
       <!--or here--> </div>

 <div class="textboox"> TEXT</div> </div>

CSS

.logo{
        width: 200px;
        height: 100px;
        background-color: #519CC4;
        float: left;
        text-align: center;
                z-index: 11;
    position: relative;

    }

    .barofcolour{
        width: 200px;
        height: 100px;
        background-color: #51B9C4;
        float: left;
        z-index: 12;
            position: relative;
            margin-top: -100px;

    }

    .wrapper {
    width: 200px;
        height: 100px;
    position: relative;
    float: left;
    z-index: 50;}

    .textboox {
    float: left;
    position: relative;
    margin-top: -20px;
    z-index: 60;
    }