悬停时不需要的重复图像

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>

1. 关闭你的<img />标签！ :)

2. 这是 1 个具有 id="entry" 的 div 示例 - 每个页面上应该只有一个具有相同 id 的元素，例如将 id="entry" 更改为 class="entry"。

3. 每次添加图像作为条目时，都会为每个条目添加音乐播放器！意味着您在页面上添加了 1 x 条目数的音乐播放器。这意味着即使正确显示顶级音乐播放器，移动也只会显示其下方的播放器 - 希望能解释它