インラインCSSでホバー効果を実装するには？JavaScriptで代用する方法

HTMLメールのテンプレートなど、メール配信サービスの仕様によっては、インラインCSS（style属性に直接記述するCSS）を書かざるを得ない場面があります。

そこでよくある疑問が、「インラインCSSでもホバー効果は実装できるのか？」という点です。

結論：インラインCSSだけではホバー効果は作れない

残念ながら、インラインCSS単体ではhover疑似クラスを使用できません。:hoverのような疑似クラスはスタイルシート内でのみ定義できるためです。

しかし、あきらめる必要はありません。JavaScriptのonMouseOverとonMouseOutイベントを使えば、CSSのhover効果とまったく同じ挙動を再現できます。

実装例：リンクにマウスを乗せると色が変わる

たとえば、ハイパーリンクにマウスカーソルを乗せたとき（mouseover時）に文字色を青から赤に変えたい場合は、次のように記述します。

<a href="#your-url-path"
onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='green'">Click here to Subscribe</a>

このコードの仕組みは以下のとおりです。

• onMouseOver：マウスカーソルが要素に乗った瞬間に発火し、文字色を「red」に変更します。
• onMouseOut：マウスカーソルが要素から離れた瞬間に発火し、文字色を「green」に戻します。
• this.style.color：イベントが発生した要素自身（この場合はリンク）のスタイルを直接操作しています。

注意点とベストプラクティス

一般的に、インラインCSSは保守性や再利用性の面で理想的な手法とは言えません。可能であれば、外部スタイルシートや<style>タグ内で:hover疑似クラスを使うのがベストです。

ただし、HTMLメールのようにCSSの記述方法が制限される環境では、このようなJavaScriptによる代替手段が非常に役立ちます。「理想どおりに書けない場合でも、目的を達成するための工夫はいくらでもある」という良い例だと言えるでしょう。