テキストリンクにマウスが乗った時に色をフェードさせる方法

リンクにマウスが乗った時にフェードさせる方法

こんにちワ。ワンタンです。

「CSS編集用デザイン」の場合、初期設定では、リンクにカーソルを乗せると青色から赤色に瞬間的に色が変わります。
それをゆっくり変わるようにする方法を御案内してみたいと思います。

CSSを使います。

「CSS編集」の末尾に以下のコードを追記して下さい。

/* リンク色をフェード */
a{
transition: color 0.5s ease 0s;
-webkit-transition: color 0.5s ease 0s;
}

注：２ヶ所の0.5は、0.5秒という意味です。大体0.5位で丁度いいと思います。


***追記：記事タイトルやページ切替ボタンにも適用する方法***

記事タイトルやページ切替ボタンもカーソルが乗った時に、色がフェードして変わるようにしたい場合は更に以下のコードを「CSS編集」に追記して下さい。

/*記事タイトル、次へボタンをフェード*/
.skinSimpleBtn:hover,.skinArticleTitle:hover {
color: #f24a75;
}

※カーソルが乗った時に変化させたい色コード；#f24a75は、お好みのものに差し換えて下さい。
※参考迄に⇒色見本と配色サイト - color-sample.com


以上、リンクにカーソルを乗せた時に、ゆっくり色が変わるようにする方法を御案内してみました。

参考になると嬉しいのですが・・


☆ブィブィ  ('-^*)/

一子相伝、他のニャンコには真似の出来ない技ニャのだ！！

ね！？

表示 - 継承 2.1