マウスオーバーで表示文字を変える

今時こんなことでそう悩む人はいないだろうけど、あれっと思ったので自分用の覚書きとして。

<a href="/newitem/"
 onMouseOver="jQuery('#new_li').text('新着'); jQuery('#new_li').css('color','#46D7FA');"
 onMouseOut ="jQuery('#new_li').text('new');  jQuery('#new_li').css('color','#191919');"
 style='color:#191919;'>
<img src="/item.jpg" alt="新着" width="92" height="76"></a>
<a href="/newitem/"
 onMouseOver="jQuery('#new_li').text('新着'); jQuery('#new_li').css('color','#46D7FA');"
 onMouseOut ="jQuery('#new_li').text('new');  jQuery('#new_li').css('color','#191919');" 
 style='color:#191919;' id="new_li">new</a></li>

jQueryが入っている前提。別にこれしきの事に jQueryを入れろということではなく、普通に入っていたから。しかも、$がコンフリクトして使えない環境で。
　
画像と文字が上下に並んでいて、どっちにマウスオーバーしても文字の方を「new」から「新着」に変えて、表示色も変えるという処理。styleで初期の色を指定しておくのがコツかな。（スタイル継承が効いているとき）