Доброго времени суток. Не меняется класс <div id="qr_center_l"> при наведении курсора на <a id="qr_button_left">
Подскажите решение
$(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);
}
