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);

$（＆＃39; ul.socialLinks＆gt; li＆gt; div＆＃39;）。not（＆＃39; li.strapper-div＆＃39;）。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。

将鼠标悬停在无序列表项上会导致其他div元素不必要地进行动画处理

2 个答案: