SVGとCSSを使って複雑な形のボタンのhoverを設定する

  • はてブ

リンクやボタンにマウスオーバーの動きを設定する際、CSSアニメーションを利用するのもすっかりと一般的になりました。
ここで問題になってくるのが、透過画像にアニメーションを設定すると、一件図形の範囲外である透過部分でもhoverの判定がされてしまいます。

02

透明チェック部分にマウスカーソルを当てると、アニメーションが出てしまう。


PCから動作を確認してください。

別タブで表示

これをimgではなく、SVGのpathやpolygonに設定すると、無事解決することが出来ます。


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


SVGを使用する

PCから動作を確認してください。

別タブで表示

SVGのpolygonタグにCSSのhoverを設定しました。実際にマウスオーバーしてみると、三角形の領域以外はhoverの判定が乗りません。例えば日本地図を作った場合などに、とても役に立つと思います。都道府県ごとにパスを作りhoverした時に色を変える、なんて細かなことができます。数年前まではFlashを使用したものですが、時代は変わりましたね。

HTML

CSS

SVGを使用することによって、図形の塗り色もCSSで操作することが出来ます。
pathやpolygonの塗り色を変更する場合は、以下のようにすればOKです。

CSS


森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ