jQuery - How to mouse over button in multiple div by Norlihazmey Ghazali

jQuery - How to mouse over button in multiple div by Norlihazmey Ghazali http://stackoverflow.com/questions/33515262/how-to-mouse-over-button-in-multiple-div/33515386?noredirect=1#33515484

by Norlihazmey Ghazali

HTML

<div class="userborder">
    <div class="userheader">
        <label class="headertext">USER</label>
    </div>
    <div class="usermainbody">
        <img src="images/default_profile.png" class="usersimage" width="110px" height="110px">
        <br>
        <br>
        <label class="labelstyle">Employee Number</label>
        <br>
        <br>
        <label class="labelstyle">First Name</label>
        <br>
        <br>
        <label class="labelstyle">Middle Name</label>
        <br>
        <br>
        <label class="labelstyle">last Name</label>
        <br>
        <br>
        <button class="changepass" onClick="test()">Change password</button>
    </div>
</div>

CSS

.usermainbody {
    border: 1px solid #CDC7C7;
    position:relative;
}
.usersimage {
    position:relative;
    margin-left:15px;
    z-index:1;
}
.labelstyle {
    position:relative;
    top:-115px;
    left:145px;
    font-size:12.5px;
    z-index:1;
}
.changepass {
    font-size:12.5px;
    background-color:#07A1B4;
    color:#DCD1D1;
    border-radius:5px;
    border-color:#07A1B4;
    height:25px;
    width:130px;
    z-index:2;
    top:-507px;
    left:730px;
}

JavaScript

$(".changepass").hover(
    function () {
        $(this).css({
            "background-color": "#3CDCF0",
            "color": "#FFFFFF",
            "border-color": "#3CDCF0"
        });

   }, 
   function () {
       $(this).css({
           "background-color": "#07A1B4",
           "color": "#DCD1D1",
           "border-color": "#07A1B4"
       });
});