jquery - 使一段文字位于顶部

Question

我正在玩的 css/jQuery 的想法基本上是，一个颜色的 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; }

Demo

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

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

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

Demo