リンクやボタンにマウスオーバーの動きを設定する際、CSSアニメーションを利用するのもすっかりと一般的になりました。
ここで問題になってくるのが、透過画像にアニメーションを設定すると、一件図形の範囲外である透過部分でもhoverの判定がされてしまいます。
透明チェック部分にマウスカーソルを当てると、アニメーションが出てしまう。
PCから動作を確認してください。
別タブで表示これをimgではなく、SVGのpathやpolygonに設定すると、無事解決することが出来ます。
SVGを使用する
PCから動作を確認してください。
別タブで表示SVGのpolygonタグにCSSのhoverを設定しました。実際にマウスオーバーしてみると、三角形の領域以外はhoverの判定が乗りません。例えば日本地図を作った場合などに、とても役に立つと思います。都道府県ごとにパスを作りhoverした時に色を変える、なんて細かなことができます。数年前まではFlashを使用したものですが、時代は変わりましたね。
HTML
|
1 2 3 |
<svg viewBox="0 0 50 50"> <polygon points="25,0 0,40 50,40 " fill="#FF9696"/> </svg> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> polygon{ cursor: pointer; } polygon:hover{ animation: sizeScale 1s ease forwards; } @keyframes sizeScale{ 100% { transform: scale(0.8) translate(10%,10%); } } </style> |
SVGを使用することによって、図形の塗り色もCSSで操作することが出来ます。
pathやpolygonの塗り色を変更する場合は、以下のようにすればOKです。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> polygon{ cursor: pointer; } polygon:hover{ animation: colorChange 1s ease forwards; } @keyframes colorChange{ 100% { fill: #FF0000; } } </style> |
