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

Question

我有元素 list 。悬停时，背景应突出显示每个元素的灰色。我还希望能够将鼠标悬停在“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”中 Hook “点击”事件，因为它一直在元素下方。

要求:

1. ul 的宽度固定为 100px

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

3. 如果 a 中的文本太长，它必须放在“X”下，但不能显示在 ul 框外。没有换行。

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

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

Answer 1

将 anchor css 从 inline-block 更改为 block 同样建议将宽度从 100px(硬编码)更改为 100% 我们的自动设置相同容器的宽度

fiddle solution