javascript - 与另一个子元素重叠列表项

Question

我有物品清单。悬停时，背景应突出显示每个项目的灰色。我还希望能够将鼠标悬停在“X”上以将其背景更改为红色。

但是，在下面的代码中，当我将鼠标悬停在每一行上时，项目背景位于“X”之上，无法将鼠标悬停在“X”上。

代码：http: //jsfiddle.net/qhoc/7vtZT/2/

HTML：

<ul>
    <li>
        <a>Long title for Item 1</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 2</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 3</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 4</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 5</a>
        <i class=icon></i>
    </li>
</ul>

CSS：

ul {
    border: 1px solid green;
    overflow: hidden;
    padding: 0;
    list-style: none;
    width: 100px;
}

a {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 20px;
    white-space: nowrap;
    width: 80px;
}

a:hover {
    background: gray;
}

.icon {
    display: inline-block;
    float: right;
    margin-top: -20px;
    background: yellow;
}

.icon:before {
    content: "X";
}

.icon:hover:before {
    background: red;
}

问题：如何更改 CSS（最好）以便能够将鼠标悬停在“X”上以更改其背景颜色并在 JS 中“可点击”，但同时将该行中的项目背景突出显示为灰色？

现在我不能在“X”中钩子“点击”事件，因为它一直在项目下。

要求：

1. 宽度ul固定为100px

2. "X" 必须在每个li a元素的同一行并保持在ul的宽度

3. 如果输入的文字a太长，它必须放在“X”下面，但不能显示在框外ul。没有包装。

4. 每个li a都有硬编码的宽度，ellipsis在长文本上显示“...”。这个宽度是可以改变的。

5. 没有Javascript。硬编码的 CSS 位置是可以的，但不太喜欢。

Answer 1

将锚 css 从 更改inline-block为block也作为建议将宽度从 100px（硬编码）更改为 100% 我们的自动以设置与容器相同的宽度

小提琴解决方案

Answer 2

添加position: relative;到所有li并添加position: absolute;, right: 0;,top: 0;到.icon

链接到小提琴

Answer 3

愿这能帮助你这么想..

a {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 10px;
    white-space: nowrap;
    width: 80px;
    height:15px;
}