1

我有一个长度可变的 li，但宽度固定的 ul。我在 li 中也有一些图标。

<ul>
    <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
    <li><span class="icon"></span>Short text</li>
    <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
</ul>

li 的text-overflow属性设置为text-overflow:ellipsis;. 但是会溢出的剪辑文本会阻止其后面的元素（.icon）注册光标悬停

我的CSS：

.icon {
    height:18px;
    width:18px;
    float:right; /*there is a good reason for this, don't complain ;) */
    cursor:pointer;
    background:url(icons.png);
    background-position:-72px -72px;
}
.icon:hover {
    background-position:-90px -72px;
}
li {
    text-overflow:ellipsis;
    height:20px;
    overflow:hidden;
    white-space:nowrap;
    list-style-type:none;
    width:150px;
}

检查我的jsfiddle，它比我解释得好得多：p

http://jsfiddle.net/eXXTG/

由 text-overflow:ellipses 隐藏的溢出文本阻止 dom 注册光标悬停在文本后面（或文本所在的位置）上方的内容。

关于解决这个问题的任何想法？

干杯

4

2 回答 2

2

你可以加

position: relative

到 .icon 类

于 2013-03-06T16:15:48.533 回答
0

只需将显示块添加到图标类：

.icon {
    height:18px;
    width:18px;
    background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png);
    float:right;
    /*there is a good reason for this, don't complain ;) */
    cursor:pointer;
    background-position:-72px -72px;
    display: block;
}
于 2013-03-06T16:21:28.787 回答