jquery - Jquery親兄弟リセットCSS

Question

次のように機能するボタンのリストを作成したかった(3) 1) マウス入力で背景と色を変更し、マウスを離れると基本スタイルにリセットします。2) クリックで背景と色を変更します。3）ラジオボタンとして機能します（つまり、1つのボタンを選択すると、他のボタンは基本スタイルに戻る必要があります）。

<ul>
     <li>
          <span class="Change_button">Button1</span>
     </li>
     <li>
          <span class="Change_button">Button2</span>
     </li>
     <li>
          <span class="Change_button">Button3</span>
     </li>
</ul>

次のコードを使用することで、最初の 2 つのニーズを達成できます

$(document).ready(function(){
$(".Change_button").mouseenter(function(){
    $(this).css({background:"url('button_hover.jpg') repeat scroll 0 0 transparent", color:"#FFFFFF"});
});
$(".Change_button").mouseleave(function(){
    $(this).css({background:"#C5C5C5 url('apply.jpg') center top repeat-x", color:"#625C54"
 });
}); 
$(".Change_button").click(function(){
    $(this).parent().parent("li > span").css({background:"#C5C5C5 url('apply.jpg') center top repeat-x", color:"#625C54"});
    $(this).css({background:"url('button_hover.jpg') repeat scroll 0 0 transparent", color:"#FFFFFF"});
    $(this).mouseleave(function(){
        $(this).css({background:"url('button_hover.jpg') repeat scroll 0 0 transparent", color:"#FFFFFF"});
    }); 
});
});

しかし、ボタンの 1 つをクリックすると、残りのボタンのスタイル (デフォルト スタイル) をリセットできません。

    **CSS**
li {
display: inline;
font-family: Verdana,Arial,Helvetica,sans-serif;
list-style: none outside none;
}
span {
background:#C5C5C5 url('apply.jpg') center top repeat-x;
border: 1px solid #BABABA;
color: #625C54;
display: block;
float: left;
margin-right: 14px;
min-width: 60px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
width: auto;
border-radius:5px 5px 5px 5px;
cursor:pointer;
}

この問題に関連する問題を検索しましたが、見つかりませんでした。私の悪い、もしあれば。