2

我真的很讨厌不得不这样做，但是这个问题让我处于我的座位边缘。

长话短说，我正在尝试在我的网站上添加一个小型音乐播放器小部件以及一个音乐选项卡，该选项卡将在悬停时显示音乐播放器。我已经做到了，但是每次我将鼠标悬停在音乐标签图标上时，它都会移动到指定位置，但会留下不需要的自身副本。

这是代码的第一部分：

<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 页面），你们可以看到问题的实际效果。任何帮助是极大的赞赏。

地点

4

1 回答 1

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

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

于 2012-12-15T03:22:21.157 回答