今回は、完全な小ネタなのですが、使い勝手は良いと思います。

疑似クラス:hoverは、主にリンクにマウスカーソルを合わせた時に使われますが、必ずしもリンクにしか使えない訳ではありません。
例えば、tableのtrにhoverを設定しておけば、今マウスカーソルが合っている行全体の色が変えられるので、どの項目に対応しているのか解りやすいですよね。

で、そのhoverで設定した効果を、ふわっとエフェクトをかけたように適用する方法です。
本当に簡単です。

a {
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
}

a:hover {
	background-color: #CCC;
}

これだけ。
ポイントは、hover側はそのままで、その前の要素（上記の場合はa）にtransitionを設定する事。
そうすれば、次に適用される要素（hoverやactive）に移る時に、設定した時間（上記の場合は0.3秒）をかけて、ふわっと変わるようになります。
この時、aではなくhoverのほうに設定すると、カーソルを合わせた時はふわっと変わりますが、カーソルを外した時には適用されません。逆に言うと、合わせた時にふわっと変わって、外した時には瞬時に戻したい時は、hoverのほうに適用すれば良いという事ですね。

当サイトのサイドメニューや、各コーナートップの記事サムネイル画像（これはhoverにopacityで少し透けるようにしています）に、同じエフェクトを使っています。
本当に簡単な設定でエフェクトがかけられるので、とても便利ですね。