html - li :hover behaviour for my list is unpredictable?

Question

如有必要，我会发布一个 JSFIddle，因为我使用的是标记语言，这会花费一些精力，但请转到此处:http://mixtape.meteor.com

• 添加足够的元素，以便溢出并出现滚动条
• 现在尝试检查任何列表元素的悬停属性，它们看起来都不合适!

下面是相关的CSS代码。

.list_element .next_song{
    cursor: pointer;
    color:white;
    margin-top:-38px;
    margin-left:29%;

    display:none;
    position: absolute;
}

.list_element .destroy {
    cursor: pointer;
    color:white;
    margin-top:-38px;
    margin-left:32%;

    display:none;
    position: absolute;
}

.list_element:hover .destroy{
    display:block;
}

.list_element:hover .next_song{
    display:block;
}

Answer 1

尝试在 element_style 中添加 position:relative，这样 position:absolute 将适合容器。然后您唯一需要做的就是调整这些按钮的对齐方式。

.element_style {
    position: relative;
    ......

.list_element .next_song {
    right: 10%;
    ......

.list_element .destroy {
    right: 0%;
    ......