Смена класса одного блока при наведении курсора на другой
 

Доброго времени суток. Не меняется класс <div id="qr_center_l"> при наведении курсора на <a id="qr_button_left">
Подскажите решение:help: :help: :help:

$(function(){
    $("#qr_button_left").mouseover(function(){
        $(this).find("#qr_center_l").removeClass("qr_center_left").addClass("qr_center_left_hover");
    });
    $("#qr_button_left").mouseout(function(){
        $(this).find("#qr_center_l").removeClass("qr_center_left_hover").addClass("qr_center_left");
    });
    
});

<div class="qr_download_left">
<div class="qr_top_left"> </div>
<div id="qr_center_l"  class="qr_center_left"> </div>
<div  class="qr_bottom">

<a id="qr_button_left" class="qr_button" style="background-color: #bf0e0e;"  href="my_site" title=" " ></a>
</div>
</div>

CSS:

#qr_button_left{}
#qr_center_l{}


.qr_center_left{
    background: url(../images/QR/qr_videomen.png) no-repeat;
    background-position: center center;
    background-size: 31%;
    position: relative;
    height: 110px;
    margin: 10px 5%;
    width: 90%;
}

.qr_center_left_hover{
    background: url(../images/QR/qr_videomen.png) no-repeat;
    background-position: center center;
    background-size: 51%;
    position: relative;
    height: 110px;
    margin: 10px 5%;
    width: 90%;
}.qr_button{
    display:block;
    height: 35px;
    background: url(../images/QR/more.png) no-repeat;
    background-size: 53%;
    background-position: center center;
    width: 150px;
    position: relative;
    top: 9px;
    margin: auto;
    border-radius: 8px;
    border: 1px solid rgba(143, 143, 143, 0.83);
    box-shadow: 3px 10px 10px -10px rgba(0, 0, 0, 0.5);
}

убрать

Заработало. Спасибо