CSSのみでグローバルメニューのhover以外をぼかしてhover中ボタンを強調する

カテゴリ：CSSだけでアクションを作る 2010年1月19日 23:51

今回のテクニックは、以前書いたピュアCSSで実装する DKIR を応用した画像ボタンのロールオーバー効果の応用版です。
なので HTML はいじらずに、CSS の変更だけで実現しています。

また、今回のテクニックは ul, li 要素に対して:hover擬似クラスを使って実現しているためIE6 は未対応です。が、IE6 でもマウスオーバーの効果は正常に動作するので、IE6 以外のモダンブラウザ向けに仕込んでおくといい感じです。いわゆる "プログレッシブ・エンハンスメント" ってやつですねｗ

デモ

http://css-eblog.com/eblog_sample/1001/ul-rollover/

ダウンロード

http://css-eblog.com/eblog_sample/1001/ul-rollover/ul-rollover.zip

▼EntryMore▼

今回のテクニックの肝はやはり前回同様、z-index のマイナス値による画像置換になります。
ただ、今回は "ul 要素に対して :hover 擬似クラスを使い、マウスオーバーしていないボタンを画像置換"しています。

HTML ソース

CSS ソース

#menu {
            /* ぼかし画像を指定 */
            background: url(bg_blur.png) left top no-repeat;
            zoom: 1;
        }
        #menu:after {
            content: ".";
            clear: both;
            display: block;
            line-height: 0;
            height: 0;
            visibility: hidden;
        }
        #menu:hover li a {
            background-image: none;
        }
        #menu:hover li img {
            position: relative;
            z-index: -1;
        }
        #menu:hover li:hover a {
            background-image: url(menu.png);
        }
        #menu li {
            float: left;
        }
        #menu li a {
            background: url(menu.png) left top no-repeat;
            display: block; /* Firefox2用の指定 */
            display: inline-block;
            vertical-align: top;
        }
        #menu li.product a { background-position: -135px 0; }
        #menu li.about a { background-position: -255px 0; }
        #menu li.blog a { background-position: -375px 0; }
        #menu li.contact a { background-position: -495px 0; }
        #menu li a:hover {
            position: static; /* IE6用の指定 */
        }
        #menu li a:hover img ,
        #menu li#current a img {
            position: relative;
            z-index: -1;
        }

解説

このテクニックの要は#menu:hover li aと#menu:hover li imgの部分で、hover 時に a 要素の背景を非表示にし、かつ img 要素を ul 要素の背面に移動させることです。

こうすることで、#menu 内のボタンすべてが ul 要素の背景に隠れることになります。そしてこの ul 要素にぼかしをかけた画像を配置しておくことで ul 要素にマウスオーバーした段階でメニューがぼける、というわけです。

ただ、これだけだとどれをポイントしているか分からないので、#menu:hover li:hover aとすることで、ul:hover の中にある li:hover、つまり現在ポイントしている部分の a 要素の背景だけを復活させ、マウスオーバー処理を実現する、というわけです。そしてこれら ul:hover, li:hover は IE6 では対応していないためぼかしの部分は動作せず、マウスオーバー処理だけが実行されるため IE6 でも問題なくマウスオーバーの効果が得られる、というわけです。

ただ本当は、:not(:hover) が使えればもう少しスマートにできたんですが、あいにくとこれは IE ではいまだに対応してないのでややめんどくさい方法で実装しています。そのおかげで、IE7で動作するので、そこそこ使えるかなーなんて思ってます。

それから前回のものと同じ仕組で実現しているので、画像オフの場合でもアクセシビリティを保ったまま実装できる点もポイントです。最近は、IE6 でも問題がなく、でもモダンブラウザで見てる人だけにちょっとしたお楽しみ♪ 的な感じでこういったことを実装するのが結構好きだったりしますｗ

この記事のカテゴリー一覧を見る⇒CSSだけでアクションを作る

パーマリンク
コメント(0)
トラックバック(0)

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/172