将鼠标悬停在无序列表项上会导致其他div元素产生不必要的动画

Question

我正在使用html来以右侧粘性方式显示共享图标和音乐播放器。 我为此创建了css和jquery动画。 我面临的问题是，在Facebook图标上悬停会导致音乐播放器div动画，我不希望音乐播放器在facebook悬停时进行动画处理。

下面是小提琴和标记

小提琴

<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="javascript:;"></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="#">
                    <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（function（）{

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

Answer 1

div.sociallink（singluar）正在增加外部div.footer的宽度。 由于.strapper-div的边距为负，因此其位置相对于div.footer宽度。 因此，随着div.footer宽度的增加，负边距也会移动。

通过用黄色边框包裹div.footer可以看到。

如果只移动.sociallink，则需要绝对定位，例如

div.sociallink { position: absolute; right: 0; top: 0; }

但是您将需要修复HTML的其他部分，以使所有工作都像以前一样好。 它可能会变得非常凌乱，因此请谨慎使用负边距和浮点，并绝对定位。

希望这可以帮助。

Answer 2

position: relative表示该空间在整个元素的父div（ div.footer ）中保留； 随着页边距的变化，它会占用更多空间，并使整个页脚div扩展。 当另一个元素（ div.strapper ）固定在左侧时，它也滑入视图中。

为了解决这个问题，您可以将div.sociallink absolute定位，也可以float: right在div.strapper 。