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”上以更改其背景颜色＆amp;在JS中是“可点击的”，但该项中的项目背景是否突出显示为灰色？

现在我无法在“X”中挂钩“点击”事件，因为它一直在这些项目下。

要求：

ul的宽度固定为100px
“X”必须位于每个li a元素的同一行，并保持ul的宽度
如果a中的文字太长，则必须在“X”下，但不能在框ul外显示。没有包装。
每个li a都有硬编码宽度，ellipsis在长文字上显示“...”。这个宽度可以改变。
没有Javascript。硬编码的CSS位置可以，但不太喜欢。

Answer 1

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

fiddle solution

Answer 2

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

Link to fiddle

Answer 3

这可以帮助你我这么认为..

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

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

3 个答案: