jQueryでマウスオーバーの際色を保持させたい

質問

jQueryでマウスオーバーした際、色を変更しマウスが離れたら基の色に戻したいのですが色の保持の仕方が思いつきません。
対象のHTMLは以下の様な感じです。
ここにマウスが触れたら色を変えて、離れたら元に戻したいのです。
何色かあるので色の指定ができません。
いい方法はないでしょうか？
CSSだと楽ですがjQueryの場合どうすればよいでしょうか？

CSS
#btn
{
width:52px;
color:#ffffff;
font-size:13px;
font-family:"MS UI Gothic";
text-align:center;
display:block;
line-height:17px;
text-decoration:none;
border:0px solid #FFFFF;
padding:1px 0px 1px 0px;
vertical-align:bottom;
}
HTML
<span style="background-color:#36AB71"><a href="a.txt" id="btn">ふぁいる</a></span>

回答No.1

LancerVII · ベストアンサー

こんにちは。
いくつか方法はあると思いますが、
#spl2の方法がスマートかなと思います。
cssのクラスを追加したり削除したりして表現しています。

#spl1は要素のスタイルを変数に保持しておき、戻す方法です。

<script type="text/javascript">
$().ready ( function() {
var bgColor = '';
$('#spl1 a').mouseover ( function() {
bgColor = $(this).parent().css ( 'background-color' );
$(this).parent().css ( 'background-color', '#000' );
}).mouseout ( function() {
$(this).parent().css ( 'background-color', bgColor );
});
$('#spl2 a').hover ( function() {
$(this).parent().addClass ( 'hv' );
},function() {
$(this).parent().removeClass('hv');
});
});
</script>
<style type="text/css">
span.bg1 {
background-color: #00f;
}
span.hv {
background-color: #ff0;
}
</style>

==== HTML
<div id="spl1">
<span style="background-color:#36ab71;"><a href="a.txt">ふぁいる</a></span>
<span style="background-color:#f00;"><a href="a.txt">ふぁいる</a></span>
</div>
<div id="spl2">
<span class="bg1"><a href="a.txt">ふぁいる</a></span>
</div>

お礼

ばっちりな仕様です！
大変参考になりました！
ありがとうございました。