コニファ・ロゴ
HOME サイトマップ 営業日カレンダー お問い合わせ

csstest：CSSだけで、hoverした要素以外をぼかして表示するメニュー

CSSだけで作る、hoverした要素以外をぼかして表示するメニューです。サンプルのメニューの各要素にhoverすると、テキストが少し浮き上がり、背景を明るくして強調し、さらに他の要素をぼかして選択要素を明確にします。

サンプル

サンプルのhtmlソース

<section class="blurry-menu">
  <ul>
    <li><a href="#">Photos1</a></li>
    <li><a href="#">Music1</a></li>
    <li><a href="#">Videos1</a></li>
    <li><a href="#">Photos2</a></li>
    <li><a href="#">Music2</a></li>
    <li><a href="#">Videos2</a></li>
  </ul>
</section>

 

引用と参考；http://jsdo.it/lebedev/GLH3

 

戻るボタン