2つのスパンに分割され、それぞれに1つの単語が含まれるサイトタイトルがあります。私が達成したいのは、サイト全体にカーソルを合わせると、2つの単語がそれぞれの色を切り替えるというタイトルを付けることです。HTMLは次のとおりです。
.site-title a span.custom-title2 {
color: #C4CB92;
transition: all 0.2s ease-in-out 0s;
}
.site-title a:hover span.custom-title2 {
color: #EAE1DA;
transition: all 0.2s ease-in-out 0s;
}
.site-title a span.custom-title {
color: #EAE1DA;
transition: all 0.2s ease-in-out 0s;
}
.site-title a:hover span.custom-title:hover {
color: #C4CB92;
transition: all 0.2s ease-in-out 0s;
} <h1 class="site-title">
<a title="FOOBAR" href="#">
<span class="custom-title">FOO</span>
<span class="custom-title2">BAR</span>
</a>
</h1>目的の効果を説明するためにcodepenを作成しました。
http://codepen.io/anon/pen/jPXymZ
それまでの私の問題は、FOOにカーソルを合わせたときにのみ目的の効果が機能することです。それはFOOとBARの両方が色を変えることです。しかし、BARにカーソルを合わせると、BARだけが色を変えます。
どちらの場合も効果を得る.site-title:hoverにはa:hover、代わりにターゲットを設定する必要があります。
.site-title a span.custom-title2 {
color: #C4CB92;
transition: all 0.2s ease-in-out 0s;
}
.site-title:hover a span.custom-title2 {
color: #EAE1DA;
transition: all 0.2s ease-in-out 0s;
}
.site-title a span.custom-title {
color: #EAE1DA;
transition: all 0.2s ease-in-out 0s;
}
.site-title:hover a span.custom-title {
color: #C4CB92;
transition: all 0.2s ease-in-out 0s;
}<h1 class="site-title">
<a title="FOOBAR" href="#">
<span class="custom-title">FOO</span>
<span class="custom-title2">BAR</span>
</a>
</h1>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加