1

我不太清楚为什么，但是这个小提琴中的 CSS 代码在 Chrome 中不能正常工作。在 Firefox 中，如果您将鼠标悬停在其中一个li元素上，文本将变为可见，但在 Chrome 中不可见。显然，在 Chrome 中，如果您display在悬停时更改属性，则元素的整个 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;
}
​

虽然将文本包裹在 a 中span可以让您修改display属性，但在这种情况下它是多余的，因为您希望将其设置为inline. 将它包裹在span元素内就足够了。

于 2012-10-08T09:25:49.187 回答