1

理由はよくわかりませんが、このフィドルの CSS コードはChrome では正しく機能しません。Firefox では、li要素の 1 つにカーソルを合わせると、テキストが表示されますが、Chrome では表示されません。どうやら、Chromedisplayでホバー時に属性を変更すると、要素の CSS ルール全体liが無視されるようです (状態は実際にはホバーに変わりません)。ただし、Chrome 開発者ツールを使用して要素の状態を手動で変更すると、問題なく動作します。ここで何か不足していますか？それともChromeのバグですか？Chrome 22 (安定リリース) と 24 (開発チャンネル リリース) でこれをテストしました。

4

1 に答える 1

2

違いがわからないので、あなたが言ったように何が無視されているのかわかりませんが、削除することでdisplay: inline;

li:hover
{
    overflow: visible;
}

そしてそれは動作します

私のフィドル

テキストの背景色が必要であると仮定して更新された Fiddle

更新されたフィドル

HTML

<ul>
    <li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
    <li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
    <li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
    <li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
</ul>​

CSS

ul
{
    width: 100px;
}

li
{
    overflow: hidden;
    text-overflow: ellipsis;
}

li:hover
{
    overflow: visible;
}

li:hover span
{
    background-color: #ff0000;
}
​

テキストを で囲むと属性spanを変更できますがdisplay、この場合は に設定する必要があるため冗長ですinline。span要素内にラップするだけで十分です。

于 2012-10-08T09:25:49.187 に答える