hoverをHTMLタグのstyleで書きたい

Question

現状

<h3>
    ・<a href="<?= $result->url ?>" style="color: black; :hover{background: red};"><?= $result->title ?></a>
</h3>

こちらのaタグ内で使用している方styleでhoverを使用したいのですが、記述がおかしいのか当たりません。

##やりたい事

1. デフォルトのカラーはBlack
2. hover時にred

よろしくお願い致します。

Answer 1

単にstyle属性に書くだけの方法では無理です。

一時期、style=":hover{ ... }"と書く記法が提案されたことはありますが、現実には普及せず、現行バージョンではstyle属性の中身は「プロパティと値の組み合わせ」のみとなっています。

Comments

[Tatsuo_Iriyama]

なるほど。
つまり今回のような場合は、css等のスタイル用ファイルに記述しましょうという事でしょうか？

[maisumakun]

別にファイルを立てずに、<style>要素に書く、という手段もあります。

[Tatsuo_Iriyama]

あーなるほど
参考にします、ありがとうございます！

Answer 2

・<a href="<?= $result->url ?>" style="color: black" onMouseOut="this.style.background=''" onMouseOver="this.style.background='red'"><?= $result->title ?></a>

じゃダメですか

Comments

[Tatsuo_Iriyama]

これだとマウスが外れた後も赤くなってしまうので、要件と外れてしまう為、ダメでした。

[kunai]

すみません、マウスが外れたときの指定が「background」ではなく「color」になっていました。
編集しましたのでこちらでいかがでしょうか。

[dit.]

onMouseOut="this.style.background=''" で良いと思います。
文字色はいつでも黒、ホバー時のみ背景を赤、外れたら背景をなくす　で要件としてはあってますか？　　すみません、コメントしてるうちに回答者さんが直してましたね

[Tatsuo_Iriyama]

@kunaiさん追記ありがとうございます！
@dit.さんもコメントありがとうございます！
要件通り行きました！

余談ではありますが、背景ではなく、文字に対してホバーかける事できますか？

[kunai]

backgroundではなく、colorにすれば勿論出来ます。背景も文字もどちらも、というのも可能です。

[Tatsuo_Iriyama]

ありがとうございます！
できました！助かりました！