2

私が遊んでいる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);
        });
    });

ですから、もし誰かが私がどのようにしてテキストを色あせたカラーバーと静的なカラーバーの両方の上に常に置くことができるかについて洞察を与えることができれば。それはいいですね。

4

3 に答える 3

2

常に同じテキストが必要で、背景色だけを変更する場合は、オーバーラップをフェードする代わりに 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 またはその他のカラー アニメーション プラグイン (または自分で作成) が必要になることに注意してください。

デモ

于 2012-07-16T17:29:38.157 に答える
0

透明な背景に不透明なテキストを表示するには (css3) 使用

background-color: rgba(...);

テキストに影響を与えることなく、背景の透明度のアルファ チャネルを指定できます。rgba の背景をアニメーション化する場合は、https://github.com/jquery/jquery-color/で jquery color をお勧めします

于 2012-07-16T17:26:10.917 に答える
0

これはちょっとした冗談かもしれませんが、途中で混乱しました。どうぞ: 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;
    }
于 2012-07-16T17:35:21.407 に答える