Jquery parent sibling reset css

Question

I wanted to create a list of buttons(3) Which act as follows 1) Change background and color on mouse enter and Reset to basic style on mouse leave. 2) Change Background and color on Click. 3) act as radio buttons.(i.e. When i select 1 button Other buttons must return to their basic style).

<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>

by using the following code i am able to accomplish my first two needs

$(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"});
    }); 
});
});

But,i am unable to reset the style(default style) of the remaining buttons when we click on one of the button

    **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;
}

I searched problems related this issue, but, i couldn't find any. My bad,If there are any.

Answer 1

JsFiddle

HTML Code:

<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>

CSS:

li {
display: inline;
font-family: Verdana,Arial,Helvetica,sans-serif;
list-style: none outside none;
}
span{
border: 1px solid #BABABA;
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;
}
span.Change_button{
    color: #625C54;
}
span.Change_button:hover{
    background:"#C5C5C5;
    color: red;
}
span.toggle{
    color: blue;
}
span.toggle:hover{
    color: lightgreen;
}

jQuery Code:

$('.Change_button').click(function(){
    $('.toggle').addClass('Change_button').removeClass('toggle');
    $(this).removeClass('Change_button').addClass('toggle');
});

Explanation:

When the user clicks on the button, it adds a 'toggle' class and removes the 'change_button' class. Hence the button is toggled and another style applies which you can manage with css. The other buttons retain their 'change_button' class & styles.

All effects are being done in CSS.