1

長さが可変の 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をチェックしてください。

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 に答える