задържане на курсора на мишката върху неподреден елемент от списъка причинява нежелано анимиране на друг елемент div

Работех върху html, за да покажа иконите за споделяне и музикалния плейър по лепкав начин от дясната страна. Създадох css и jquery анимациите за него. изправен съм пред проблем, че задържането на мишката върху иконата на Facebook причинява анимиране на div на музикалния плейър, не искам музикалният плейър да анимира при задържане на курсора на мишката върху Facebook.

по-долу е цигулка и маркиране

FIDDLE

<div class="footer">
<ul class="socialLinks">
            <li>
                <div class="sociallink">
                    <a class="fb text-color" target="_blank" href="https://www.facebook.com/princeofcool">
                        Facebook</a></div>
            </li>
        </ul>
        <div class="strapper-div">
            <div class="vol-icn">
                <a class="musicPlayer" href="/bgjavascript:;"></a>
            </div>
            <div class="left" style="width: 115px; color: #fff; padding-top: 5px; padding-left: 5px;">
                <div class="marquee">
                    <span class="current-song marquee-text"></span>
                </div>
            </div>
            <div class="next-btn">
                <a href="/bg#">
                    <img src="http://goo.gl/YuEBEo" width="25" alt=">" /></a></div>
        </div>
</div>

CSS

.footer { position:fixed; right:0px; bottom:0px; margin-bottom:70px; z-index:9999; }
ul.socialLinks { position:relative; z-index:999; }
ul.socialLinks li { overflow:hidden; }
ul.socialLinks li div { height:30px; padding:7px; margin-right:-73px; float:right; }
ul.socialLinks li div a { display:block; height:30px; width:58px; line-height:30px; font-weight:300; padding-left:40px; padding-right:5px;  background-position: top left; background-repeat:no-repeat; }

ul.socialLinks li div a.fb, ul.mSocialLinks li a.fb { background-image:url('http://goo.gl/XmBIAZ'); }
ul.socialLinks li div:hover a.fb, ul.mSocialLinks li:hover a.fb { background-image:url('http://goo.gl/bytO8P'); }


a.musicPlayer { display:block; float:right; text-indent:-9999px; width:44px; height:33px; background-image:url('http://johnericbooth.com/2014/assets/styles/img//music.gif'); background-position: center center; background-repeat:no-repeat; 
                top: 0px; /* For IE8 and earlier */
                }
a.musicPlayer.off { background-image:url('http://goo.gl/jDoqWk');}


        .strapper-div
        {
            height: 33px;
            width: 200px;
            background: #000;
            padding-top: 7px;
            padding-bottom: 7px;
            padding-left: 1px;
            padding-right: 3px;
        }

        .vol-icn
        {
            /*background: red;*/
            width: 44px;
            height: 33px;
            float: left;
        }

        .next-btn
        {
            float: right;
            vertical-align: middle;
            padding-top: 3px;
            padding-right: 5px;
        }

        .left
        {
            float: left;
        }

Jquery

   $('.strapper-div').stop().animate({ marginRight: '-216px' }, 600);

$('ul.socialLinks>li>div').not('li.strapper-div').hover(функция () {

    $(this).stop().animate({ marginRight: 0 }, 250, function () { });
},
function () {
    $(this).stop().animate({ marginRight: '-73px' }, 250, function () { });
});