-1

私はこれを本当に悪い言葉で言いましたが、私はそれをどのように言えばいいのかよくわかりません.最近作ったブログのこのタイトルを作ろうとしています.

ホバー時にタイトルのセクションの色を変更し、次に他のセクションの色を変更して、テキストのテレポートのような錯覚を作成したい...

これは私がこれまでに持っているコーディングです

.youtext{
padding-top:15px;    
padding-left:5px;    
background-color:#000; 
text-shadow:  0 0 0.3 #fff;
color:#fff;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear; 
}

.donttext{
padding-top:15px;    
padding-left:5px;    
background-color:#000; 
text-shadow:  0 0 0 #fff;
color:#000;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}    

.youtext:hover{
background-color:#000; 
text-shadow:  0 0 0 #fff;
color:#000;    
}

.youtext:hover .donttext{
text-shadow:  0 0 0.3em #fff;
color:#fff;   
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

そして他の部分

<div class="nowyouseeme">NOW 
<span class="youtext">YOU</span>
SEE ME, NOW YOU 
<span class="donttext">DON'T</span></div>
4

2 に答える 2

2

一般的な兄弟セレクタ ( ) を使用する必要があります~。それ以外の場合は、ホバーされた要素の.donttext 子を探します。ブラウザのサポートは良くありませんが、トランジションが機能するものなら何でも (多かれ少なかれ) 機能します。

.youtext:hover ~ .donttext{
    text-shadow:  0 0 0.3em #fff;
    color:#fff;   
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

デモ

于 2013-08-17T17:24:26.763 に答える