Question

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

Demo

编辑：如果您想使用jQuery解决方案，您还可以执行以下操作：

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

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

Demo

Answer 2

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

background-color: rgba(...);

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

的jquery颜色

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;
    }

制作一段文字就坐在上面

3 个答案: