Question

我真的很讨厌不得不对此产生影响，但这个问题让我处于座位边缘。

总而言之，我正在尝试在我的网站上添加一个小型音乐播放器小部件以及一个将在悬停时显示音乐播放器的音乐选项卡。我已经完成了这个，但每次我将鼠标悬停在音乐标签图标上时，它都会移动到指定的位置，但会留下不需要的副本。

以下是代码的第一部分：

<style type ="text/css">
    #musicplayer{
        text-align: center;
        font-size: 11px;
        position:absolute;left:0px;top:-100px;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        z-index:999;
    }

    #musicplayer:hover{
        top:0px;
    }

    #music{
        padding:3px;
        background: transparent;
        width:175px;
        height: auto;
        margin-left:0px;
        font-family:'Coming Soon';
        z-index: 9999;
        text-align:center;
        padding-left:2px;
        padding-right:2px;
        padding-bottom:70px;
        border-bottom-right-radius:0px;
        margin-top:20px;
    }

    #musictab{
        font-family: 'Coming Soon';
        height:auto;
        padding:3px;
        background:transparent;
        width:30px;
        margin-left:0px;
        margin-top:0px;
        -moz-border-radius:0px;
        border-bottom-right-radius:6px;
        border-bottom-left-radius:6px;
    }
</style>

以下是我认为也可能导致问题的div标签

<div id="musictab">
    <p><img src="http://i47.tinypic.com/2cpyjv9.jpg" border="0"></a></p>
</div>

请注意，此代码固有其他div标记，但我省略了它们，因为我认为它们不会导致问题。

编辑：不妨发布我的网站（错误，Tumblr页面），你们可以看到问题在于行动。非常感谢任何帮助。

Site

Answer 1

    <div id="entry">
        <div class="holder"></div>
        <a href="http://wrjacobs.tumblr.com/post/37948918891/hud-biennial-019">
            <img src="..." alt="hud-biennial-019" width="380px">
        </a>
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="video"></div>
        <div class="holder"></div>
        <div id="musicplayer">
            <div id="music">
                <center>
                <img... />
                <br>
            </center>
        </div>
        <div id="musictab">
            <p>
                <img src="http://i47.tinypic.com/2cpyjv9.jpg" border="0">
            </p>
        </div>
    </div>

关闭您的<img />代码！：）
这是div的一个例子，其中id =“entry” - 每个页面上只有一个元素具有相同的id，例如将id =“entry”改为class =“entry”。
每次添加图像作为条目时，都会为每个条目添加音乐播放器！这意味着您已在页面上添加了1 x条目的音乐播放器。这意味着即使顶级音乐播放器被正确显示，移动只显示其下方的音乐播放器 - 希望能解释它

悬停时不需要的重复图像

1 个答案: