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

Overlap list item with another child element

本文关键字：列表 重叠 元素 另一个      更新时间：2023-09-26

我有项目列表。悬停时，背景应突出显示每个项目的灰色。我还希望能够将鼠标悬停在"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位置是可以的，但不太受欢迎。

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

小提琴解决方案

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

链接到小提琴

也许这可以帮助你，我认为是这样..

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