[CSS]ホバーの方向で変化するカラーが異なるスタイルシートのテクニック

ブラックに塗られたdiv要素を左からホバーするとオレンジに、右からホバーするとブルーに変更するスタイルシートのテクニックを紹介します。 HTML 最初に表示されているブラックのdiv要素と4つのdiv要素を配置します。 <div class="b-block"> <div class="b-block__hoverer"></div> <div class="b-block__hoverer"></div> <div class="b-block__hoverer"></div> <div class="b-block__hoverer"></div> <div class="b-block__content"> Hover me! </div> </div> CSS CSS3のtransformを使用して、div要素を移動します。 /* The wrapper */ .b-block {

[gnta]

使い道が思いつかない…

[kkeisuke]

transform rotate box-shadow

[warriorking]

(CSS)ホバーの方向で変化するカラーが異なるスタイルシートのテクニック | コリス

[otchy210]

ほえー、よくこんな実装思いつくなぁ。アイディア勝負だ。

[hachiame]

応用したらいろいろなものに代用できそうな気がする。

[hedeyoshi]

こんな事出来るのか！凄い！

[nors]

http://jsfiddle.net/kizu/zfUyN/

[daisuke1209]

css multidirection

[lotus_tribal]

へぇぇ！おもしろいね！！

[Donca]

✔ [CSS]ホバーの方向で変化するカラーが異なるスタイルシートのテクニック